|
Total Views :
32662 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
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.
|
|
|
|
To view our sample GridView with Multiple Filters, click here. |
|
|
|
|
|
|
|
|
|
|