Inhaltsverzeichnis
Introduction
This article explains the methodology of implementing multiple filters in an Ajax based Asp.Net GridView control. The main point to note down in this article is to filter the data within the GridView control.
Asp.Net GridView control is used to displays the values of a data source in a table where each column represents a field and each row represents a record. If you are familiar with the DataGrid control from the .NET Framework version 1.0, the GridView control is the successor to the DataGrid control. The GridView control enables you to select, sort, and edit records that get displayed from the data source. This article will give a brief knowledge to build a dropdown list filtering function within the GridView control. Additionally, we are going to implement AJAX into it.
Sample Scenario
For demonstration, let us take customer information to be filled in the GridView. We can build filters on all columns of the GridView, but for this demonstration, we just try to implement two types of filters one for the Gender and another for the Customer Type. For each filter we need to add DropDownList controls. The first DropDownList we are going to fill with static data and another we are going to fill with some dynamic content from the data source.
Set up the GridView Control
Open Microsoft Visual Studio 2005, create an Asp.Net Ajax Enabled Website, drag and drop an UpdatePanel, and drag and drop a GridView control from your Toolbox Data tab into the UpdatePanel.
Change the value of AutoGenerateColumns of the GridView to false. Click on the SmartTag of the GridView, choose Add New Column, from the popup window to Add Field, add five TemplateFields in the GridView for Name, Gender, City, State and Customer Type. In each template field’s ItemTemplate section, add a Label Control and bind it to the corresponding field in the data source. The fields in our customer table are Cus_Name Name of the Customer, Cus_Gender Gender, Cus_City City, Cus_State State and Cus_Type Customer Type. We are going to add DropDownList for the Gender and Customer Type column. So insert two DropDownList controls into the HeaderTemplate section of Gender and Customer Type column and name it as cmbGender and cmbCustomerType respectively.
Alter the AutoPostBack of the cmbGender DropDownList to True and since this dropdown has to contain static data, add ListItems such as All, Male and Female. Also add an event OnSelectedIndexChanged into it. So the structure of cmbGender will be as follows
<asp:DropDownList ID="cmbGender" runat="server" AutoPostBack="True" OnSelectedIndexChanged="cmbGender_SelectedIndexChanged">
<asp:ListItem Value="All">All</asp:ListItem>
<asp:ListItem Value="Male">Male</asp:ListItem>
<asp:ListItem Value="Female">Female</asp:ListItem>
</asp:DropDownList>
Now the cmbCustomerType control is going to hold dynamic data, so specify the DataTextField and DataValueField as Cus_Type. That is unique customer type data is going to fill in this DropDownList. Then make the AutoPostBack to True and add an event OnSelectedIndexChanged to do postback.
<asp:DropDownList ID=" cmbCustomerType" runat="server" AutoPostBack="True" DataTextField="Cus_Type" DataValueField="Cus_Type" OnSelectedIndexChanged="cmbType_SelectedIndexChanged">
</asp:DropDownList>
The first step in the code behind is to fill the cmbCustomerType control with unique dynamic data from data source and to retain its value on every postback. So we have to declare two page scope variables at the top of page to hold the DropDownList controls values.
protected string CustomerType;
protected string Gender;
These two variables will keep the value of the DropDownList on every postback. Now in the RowDataBound of the GridView control, we have to write a small block of code to fetch data from database and fill the cmbCustomerType control.
if (e.Row.RowType == DataControlRowType.Header) {
DropDownList cmbCustomerType = (DropDownList)e.Row.FindControl("cmbCustomerType");
cmbCustomerType.DataSource = FetchUniqueCustomerType();
cmbCustomerType.DataBind();
cmbCustomerType.Items.Insert(0, new ListItem("All", "All"));
cmbCustomerType.SelectedValue = CustomerType;
DropDownList cmbGender = (DropDownList)e.Row.FindControl("cmbGender");
cmbGender.SelectedValue = Gender;
}
The method FetchUniqueCustomerType should return the records with unique customer type information. You can write this method’s definition in some class file.
Now we need to fill the GridView with records from the database. To achieve this we are going to write a new method called BindGridView. The code block is given below
private void BindGridView() {
DataView dv = GetAllCustomers();
string condition = null;
if (GridView1.HeaderRow != null)
{
DropDownList cmbCustomerType=(DropDownList)GridView1.HeaderRow.FindControl("cmbCustomerType");
CustomerType = cmbCustomerType.SelectedValue;
DropDownList cmbGender = (DropDownList)GridView1.HeaderRow.FindControl("cmbGender");
Gender = cmbGender.SelectedValue;
if (cmbCustomerType.SelectedValue != "All")
{
condition = "Cus_Type='" + cmbCustomerType.SelectedValue + "'";
}
if (cmbGender.SelectedValue != "All") {
if (condition!= null)
condition += " and Cus_ Gender ='" + cmbGender.SelectedValue + "'";
else
condition = "Cus_ Gender ='" + cmbGender.SelectedValue + "'";
}
}
if (condition!= null)
dv.RowFilter = condition;
GridView1.DataSource = dv;
GridView1.DataBind();
}
If you closely look at the above code once, you can easily understand the logic behind that. We are binding the GridView Control by a method which returns a DataView, then by consuming the values from the DropDownList, we construct a conditional string, then we do filter in the records of the DataView.
Point-by-Point Explanation
1. The method GetAllCustomers returns some records from the database and its return type is DataView.
DataView dv = GetAllCustomers();
2. Declare a variable to construct conditional string to do filter in the DataView.
string condition = null;
3. Checking if HeaderRow Exists for the GridView, else it will raise an exception.
if (GridView1.HeaderRow != null) {}
4. Find both DropDownList controls in the HeaderRow and assign its value to the variables to retain the value after every postback you made during filtering.
DropDownList cmbCustomerType=(DropDownList)GridView1.HeaderRow.FindControl("cmbCustomerType");
CustomerType = cmbCustomerType.SelectedValue;
DropDownList cmbGender = (DropDownList)GridView1.HeaderRow.FindControl("cmbGender");
Gender = cmbGender.SelectedValue;
5. Next we building the expression with both DropDownList control’s SelectedValue and check if SelectedValue is ‘All’, then no need to construct it in the expression.
if (cmbCustomerType.SelectedValue != "All")
{
condition = "Cus_Type='" + cmbCustomerType.SelectedValue + "'";
}
if (cmbGender.SelectedValue != "All") {
if (condition!= null)
condition += " and Cus_ Gender ='" + cmbGender.SelectedValue + "'";
else
condition = "Cus_ Gender ='" + cmbGender.SelectedValue + "'";
}
}
6. If the string condition is not empty then we do filter in the DataView and then assing to the GridView control, which will display the available records only.
if (condition!= null)
dv.RowFilter = condition;
GridView1.DataSource = dv;
GridView1.DataBind();
Since this GridView control is placed inside an UpdatePanel, filtering records will be functioned in AJAX based without any postback.
Friends, here we provide only the basic logic to build Multiple Filters in a GridView. These can differ from application to application and from requirment to requirement. It is upto you READERS, to modify the code and apply the logic your application required.
Loading…