Create Filter Tool using ASP.NET GridView Control

Create Filter Tool using ASP.NET  GridView Control

This post will cover how to implement custom filer tool using ASP.NET GridView Control. Below figure shows the overview of the filter control.

Sample Solution

1. We need to define <ItemTemplate> and the  <FooterTemplate> for each and every column of the GridView.
2. Then define   <EmptyDataTemplate> for GridView.
3. Then you need to maintain GridView information in ViewState, because each time we click the "Add" button we need to bind the changed data again to the GridView. 
4. "RowCommand" and "RowDataBound" events of the GridView is used for bind the data with the help of ViewState.

Please refer below code,

Define GridView Markup

 <asp:GridView ID="FilterGridView" runat="server" AutoGenerateColumns="False" EnableModelValidation="True" OnRowCommand="FilterGridView_RowCommand" OnRowDataBound="FilterGridView_RowDataBound" ShowFooter="True" ShowHeader="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="ColumnDropDownList" runat="server">
<asp:ListItem Text="First Name" Value="FirstName"></asp:ListItem>
<asp:ListItem Text="Last Name" Value="LastName"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="ColumnDropDownList" runat="server">
<asp:ListItem Text="First Name" Value="FirstName"></asp:ListItem>
<asp:ListItem Text="Last Name" Value="LastName"></asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="CriteriaDropDownList" runat="server">
<asp:ListItem Text="Conatins" Value="Contains"></asp:ListItem>
<asp:ListItem Text="Equals" Value="Equals"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="CriteriaDropDownList" runat="server">
<asp:ListItem Text="Conatins" Value="Contains"></asp:ListItem>
<asp:ListItem Text="Equals" Value="Equals"></asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="FieldValueTextBox" runat="server"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="FieldValueTextBox" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="OperatorDropDownList" runat="server">
<asp:ListItem Text="And" Value="And"></asp:ListItem>
<asp:ListItem Text="Or" Value="Or"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="OperatorDropDownList" runat="server">
<asp:ListItem Text="And" Value="And"></asp:ListItem>
<asp:ListItem Text="Or" Value="Or"></asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>

<asp:TemplateField>
<FooterTemplate>
<asp:Button ID="btnInsert" runat="Server" Text="Add" CommandName="Insert" UseSubmitBehavior="False" />
</FooterTemplate>
</asp:TemplateField>

</Columns>

<EmptyDataTemplate>
<asp:DropDownList ID="ColumnDropDownList" runat="server">
<asp:ListItem Text="First Name" Value="FirstName"></asp:ListItem>
<asp:ListItem Text="Last Name" Value="LastName"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="CriteriaDropDownList" runat="server">
<asp:ListItem Text="Conatins" Value="Contains"></asp:ListItem>
<asp:ListItem Text="Equals" Value="Equals"></asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="FieldValueTextBox" runat="server"></asp:TextBox>
<asp:DropDownList ID="OperatorDropDownList" runat="server">
<asp:ListItem Text="And" Value="And"></asp:ListItem>
<asp:ListItem Text="Or" Value="Or"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnInsert" runat="Server" Text="Add" CommandName="EmptyInsert" UseSubmitBehavior="False" />
</EmptyDataTemplate>
</asp:GridView>


RowCommand

if (e.CommandName.Equals("Insert"))
{
DropDownList ColumnsDropDownList = (DropDownList)FilterGridView.FooterRow.FindControl("ColumnDropDownList");
DropDownList CriteriaDropDownList = (DropDownList)FilterGridView.FooterRow.FindControl("CriteriaDropDownList");
DropDownList OperatorDropDownList = (DropDownList)FilterGridView.FooterRow.FindControl("OperatorDropDownList");
TextBox FieldValueTextBox = (TextBox)FilterGridView.FooterRow.FindControl("FieldValueTextBox");

DataTable existingData = (DataTable)ViewState["GridViewData"];
DataRow newData = existingData.NewRow();
newData["FieldName"] = ColumnsDropDownList.SelectedValue;
newData["Criteria"] = CriteriaDropDownList.SelectedValue;
newData["FieldValue"] = FieldValueTextBox.Text;
newData["Operator"] = OperatorDropDownList.SelectedValue;
existingData.Rows.Add(newData);
existingData.AcceptChanges();

ViewState["GridViewData"] = existingData;
}
if (e.CommandName.Equals("EmptyInsert"))
{

DropDownList ColumnsDropDownList = (DropDownList)FilterGridView.Controls[0].Controls[0].FindControl("ColumnDropDownList");
DropDownList CriteriaDropDownList = (DropDownList)FilterGridView.Controls[0].Controls[0].FindControl("CriteriaDropDownList");
DropDownList OperatorDropDownList = (DropDownList)FilterGridView.Controls[0].Controls[0].FindControl("OperatorDropDownList");
TextBox FieldValueTextBox = (TextBox)FilterGridView.Controls[0].Controls[0].FindControl("FieldValueTextBox");

DataTable existingData = (DataTable)ViewState["GridViewData"];
DataRow newData = existingData.NewRow();
newData["FieldName"] = ColumnsDropDownList.SelectedValue;
newData["Criteria"] = CriteriaDropDownList.SelectedValue;
newData["FieldValue"] = FieldValueTextBox.Text;
newData["Operator"] = OperatorDropDownList.SelectedValue;
existingData.Rows.Add(newData);
existingData.AcceptChanges();

ViewState["GridViewData"] = existingData;

}
BindDataToGridView(); 


RowDataBound

DataTable data = (DataTable)ViewState["GridViewData"];
if (e.Row.RowType == DataControlRowType.DataRow)
{
DropDownList ColumnsDropDownList = (DropDownList)e.Row.FindControl("ColumnDropDownList");
DropDownList CriteriaDropDownList = (DropDownList)e.Row.FindControl("CriteriaDropDownList");
DropDownList OperatorDropDownList = (DropDownList)e.Row.FindControl("OperatorDropDownList");
TextBox FieldValueTextBox = (TextBox)e.Row.FindControl("FieldValueTextBox");

ColumnsDropDownList.SelectedValue = data.Rows[e.Row.RowIndex]["FieldName"].ToString();
CriteriaDropDownList.SelectedValue = data.Rows[e.Row.RowIndex]["Criteria"].ToString();
OperatorDropDownList.SelectedValue = data.Rows[e.Row.RowIndex]["Operator"].ToString();
FieldValueTextBox.Text = data.Rows[e.Row.RowIndex]["FieldValue"].ToString();
} 

DataBind Method

private void BindDataToGridView()
{
DataTable data = (DataTable)ViewState["GridViewData"];

FilterGridView.DataSource = data;
FilterGridView.DataBind();
}