Use the search box (SearchableGridView) in ASP. NET GridView)

Introduction:

I am searching for a method to implement the inclusion of the search box in the ASP. NET GridView control. I couldn't find a perfect solution and decided to implement it myself. Here, I will write out my solution.

Why is this solution used?

You can use this scheme and implement table filtering easily. The search and filter operations can be triggered by fair search events. In addition, the GridView can also set options to display the row serial number, total number of rows, and display the header and footer even if no row is available in the GridView. (By default, the header and footer are hidden when the GridView has no data rows .)

This solution

What have I done?

1. I expanded the GridView and created a SearchableGridView class.
2. added a TemplateColumn to display the number of rows.

3. Added controls in the footer to process search events.
4. When search is enabled, the search string is passed to the trigger event.

Code:

1. Create a SearchableGridView to expand the GridView. A search box is displayed in the footer of the Gridview.

Copy to ClipboardReference: [www.bkjia.com] public class NumberColumn: ITemplate
{
Public void InstantiateIn (Control container)
{
}
}

In the SearchableGridView class, the OnInit function I override adds the row sequence number displayed in the first column of the template. If the ShowRowNumber flag is enabled.

Copy to ClipboardReference: [www.bkjia.com] protected override void OnInit (EventArgs e)
{
Base. OnInit (e );
// If showrownumber option is turned on then add
// The template column as the first column.
If (! IsDesign () & ShowRowNumber)
{
TemplateField tmpCol = new TemplateField ();
NumberColumn numCol = new NumberColumn ();
TmpCol. ItemTemplate = numCol;
// Insert this as the first column
This. Columns. Insert (0, tmpCol );
}
}

This OnRowCreated method is executed when each row is created. During this period, for different row types created, at the end of the table, we add the search control and display the number of rows label, add the number of rows in the table body, and add the column title in the header.

Copy to ClipboardReference: [www.bkjia.com] protected override void OnRowCreated (GridViewRowEventArgs e)
{
Base. OnRowCreated (e );
If (! IsDesign () // During Runtime
{
If (e. Row. RowType = DataControlRowType. Footer)
{
// If ShowFooter is set to true
If (ShowFooter & e. Row. Cells. Count> 0)
{
// If TotalRows has to be shown
If (ShowTotalRows)
{
E. Row. Cells [0]. Text = ViewState [NO_OF_ROWS] + "Rows .";
}
If (e. Row. Cells [e. Row. Cells. Count-1]. Controls. Count = 0)
{
// Create the search control
Table table = new Table ();
Table.style. Add ("width", "100% ");
Table. Style. Add ("align", "right ");
TableRow tr = new TableRow ();
TableCell tc = new TableCell ();
Tc. Style. Add ("align", "right ");
Tc. Style. Add ("width", "100% ");
// Populate the dropdownlist with the Ids
// Of the columns to be filtered
If (_ ddlFinder. Items. Count = 0)
SetFilter ();
_ BtnSearch. Width = 20;
_ BtnSearch. Height = 20;
_ BtnSearch. ImageAlign = ImageAlign. AbsMiddle;
_ BtnSearch. AlternateText = "Search ";
// Assign the function that is called when search button is clicked
_ BtnSearch. Click + = new ImageClickEventHandler (_ btnSearch_Click );

Tc. Controls. Add (_ ddlFinder );
Tc. Controls. Add (_ tbSearch );
Tc. Controls. Add (_ btnSearch );
Tr. Cells. Add (tc );
Table. Rows. Add (tr );
_ PnlSearchFooter. Controls. Add (table );
E. Row. Cells [e. Row. Cells. Count-1]. Controls. Add (_ pnlSearchFooter );

}
}
}
If (e. Row. RowType = DataControlRowType. Header)
{
// If ShowHeader is set to true and
// If Row number has to be shown
If (ShowRowNumber & ShowHeader)
{
E. Row. Cells [0]. Text = "Sno ";
}
}
Else if (e. Row. RowType = DataControlRowType. DataRow)
{
If (ShowRowNumber)
{
// Set the row number in every row
E. Row. Cells [0]. Text = (e. Row. RowIndex +
(This. PageSize * this. PageIndex) + 1). ToString ();
}
}
}
}

• Three pages in total:
• Previous Page
• 1
• 2
• 3
• Next Page