GridView With Multiple Filters

In this article, you will learn to apply multiple filter in GridView

Let's start.

Step 1 - Add New Project

Open Visual Studio 2017 => Click Add Project => Select Web Application Template => Fill all required details.

Step 2

Select Web Application Template.

Step 3

Add new item.

Right click in project solution => Add => New Item => Select Web Form = > DEMO.aspx

Step 4

Paste the below Html code under the body tag.

<form id="form1" runat="server">
<center><h1>Gridview With Multiple Filter</h1></center>
<div style="justify-content: center; display: flex">
<table style="text-align: center;">
<tr>
<td style="border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding-left: 22px; padding-right: 22px;">
<asp:DropDownList ID="ddlteamfilter" runat="server" OnSelectedIndexChanged="OnSelectedIndexChanged_ddlteamfilter" AutoPostBack="true">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
<asp:ListItem Text="Development" Value="Development"></asp:ListItem>
<asp:ListItem Text="UAT" Value="UAT"></asp:ListItem>
<asp:ListItem Text="Product" Value="Product"></asp:ListItem>
<asp:ListItem Text="Testing" Value="Testing"></asp:ListItem>
<asp:ListItem Text="Deployment" Value="Deployment"></asp:ListItem>
</asp:DropDownList>
</td>
<td style="border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding-left: 22px; padding-right: 22px;">
<asp:TextBox ID="txtLocationfilter" runat="server" OnTextChanged="txtLocationfilter_TextChanged"
placeholder="Enter Location" AutoPostBack="true"></asp:TextBox>
</td>
<td style="border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding-left: 22px; padding-right: 22px;">
<asp:TextBox ID="txtEmployeefilter" runat="server" OnTextChanged="txtEmployeefilter_TextChanged"
placeholder="Enter Employee" AutoPostBack="true"></asp:TextBox>
</td>
</tr>
</table>
</div>
<hr />
<br />
<div style="justify-content: center; display: flex">
<asp:GridView ID="gvEmployee" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
</div>
</form>

Step 5

Replace auto generated class code with the below code.

Note

Here I am hardcoded Employee data in class file , you can use Database.

public partial class DEMO : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindEmployeeGridView();
}
}
public void BindEmployeeGridView()
{
DataTable dtEmployee = new DataTable();
dtEmployee.Columns.Add("EmployeeID", typeof(String));
dtEmployee.Columns.Add("Name", typeof(String));
dtEmployee.Columns.Add("Gender", typeof(String));
dtEmployee.Columns.Add("Team", typeof(String));
dtEmployee.Columns.Add("Location", typeof(String));
DataRow dr1 = dtEmployee.NewRow();
dr1["EmployeeID"] = "EMP1";
dr1["Name"] = "Mahesh Vishwakarma";
dr1["Gender"] = "Male";
dr1["Team"] = "Development";
dr1["Location"] = "Mumbai";
DataRow dr2 = dtEmployee.NewRow();
dr2["EmployeeID"] = "EMP2";
dr2["Name"] = "Srihari Ausakar";
dr2["Gender"] = "Male";
dr2["Team"] = "Development";
dr2["Location"] = "Noida";
DataRow dr3 = dtEmployee.NewRow();
dr3["EmployeeID"] = "EMP3";
dr3["Name"] = "Amit Berad";
dr3["Gender"] = "Male";
dr3["Team"] = "Development";
dr3["Location"] = "Mumbai";
DataRow dr4 = dtEmployee.NewRow();
dr4["EmployeeID"] = "EMP4";
dr4["Name"] = "Kishor V";
dr4["Gender"] = "Male";
dr4["Team"] = "UAT";
dr4["Location"] = "Pune";
DataRow dr5 = dtEmployee.NewRow();
dr5["EmployeeID"] = "EMP5";
dr5["Name"] = "Suraj Keni";
dr5["Gender"] = "Male";
dr5["Team"] = "UAT";
dr5["Location"] = "Pune";
DataRow dr6 = dtEmployee.NewRow();
dr6["EmployeeID"] = "EMP6";
dr6["Name"] = "Darshan";
dr6["Gender"] = "Male";
dr6["Team"] = "Product";
dr6["Location"] = "Bangalore";
DataRow dr7 = dtEmployee.NewRow();
dr7["EmployeeID"] = "EMP7";
dr7["Name"] = "Vandana";
dr7["Gender"] = "Female";
dr7["Team"] = "Testing";
dr7["Location"] = "Mumbai";
DataRow dr8 = dtEmployee.NewRow();
dr8["EmployeeID"] = "EMP8";
dr8["Name"] = "Sachin";
dr8["Gender"] = "Male";
dr8["Team"] = "Deployment";
dr8["Location"] = "Mumbai";
DataRow dr9 = dtEmployee.NewRow();
dr9["EmployeeID"] = "EMP9";
dr9["Name"] = "Radhika";
dr9["Gender"] = "Female";
dr9["Team"] = "Deployment";
dr9["Location"] = "Mumbai";
DataRow dr10 = dtEmployee.NewRow();
dr10["EmployeeID"] = "EMP10";
dr10["Name"] = "Swanit Sankpal";
dr10["Gender"] = "Male";
dr10["Team"] = "Development";
dr10["Location"] = "Pune";
dtEmployee.Rows.Add(dr1);
dtEmployee.Rows.Add(dr2);
dtEmployee.Rows.Add(dr3);
dtEmployee.Rows.Add(dr4);
dtEmployee.Rows.Add(dr5);
dtEmployee.Rows.Add(dr6);
dtEmployee.Rows.Add(dr7);
dtEmployee.Rows.Add(dr8);
dtEmployee.Rows.Add(dr9);
dtEmployee.Rows.Add(dr10);
gvEmployee.DataSource = dtEmployee;
gvEmployee.DataBind();
}
protected void OnSelectedIndexChanged_ddlteamfilter(object sender, EventArgs e)
{
BindEmployeeGridView();
if (txtLocationfilter.Text != "" && txtEmployeefilter.Text != "")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format(ddlteamfilter.SelectedValue == "ALL" ? "(Location LIKE '{0}%' OR Location LIKE '%{0}%') OR (Team = '{1}') AND (Name LIKE '{2}%' OR Name LIKE '%{2}%')" : "(Location LIKE '{0}%' OR Location LIKE '%{0}%') AND Team = '{1}' AND (Name LIKE '{1}%' OR Name LIKE '%{1}%')", txtEmployeefilter.Text, ddlteamfilter.SelectedValue == "ALL" ? "" : ddlteamfilter.SelectedValue, txtLocationfilter.Text);
}
else if (txtEmployeefilter.Text != "")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format(ddlteamfilter.SelectedValue == "ALL" ? "(Name LIKE '{1}%' OR Name LIKE '%{1}%') OR Team = '{1}'" : "(Name LIKE '{1}%' OR Name LIKE '%{1}%') AND Team = '{1}'", txtEmployeefilter.Text, ddlteamfilter.SelectedValue == "ALL" ? "" : ddlteamfilter.SelectedValue);
}
else if (txtLocationfilter.Text != "")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format(ddlteamfilter.SelectedValue == "ALL" ? "(Location LIKE '{0}%' OR Location LIKE '%{0}%') OR Team = '{1}'" : "(Location LIKE '{0}%' OR Location LIKE '%{0}%') AND Team = '{1}'", txtLocationfilter.Text, ddlteamfilter.SelectedValue == "ALL" ? "" : ddlteamfilter.SelectedValue);
}
else
{
if (ddlteamfilter.SelectedValue != "ALL")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format("Team = '{0}'", ddlteamfilter.SelectedValue);
}
}
gvEmployee.DataBind();
}
protected void txtLocationfilter_TextChanged(object sender, EventArgs e)
{
BindEmployeeGridView();
if (txtEmployeefilter.Text != "" && ddlteamfilter.SelectedValue != "ALL")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format("(Location LIKE '{0}%' OR Location LIKE '%{0}%') AND Team = '{1}' AND (Name LIKE '{2}%' OR Name LIKE '%{2}%')", txtLocationfilter.Text, ddlteamfilter.SelectedValue, txtEmployeefilter.Text);
}
else if (ddlteamfilter.SelectedValue != "ALL")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format(" Team = '{0}' AND (Location LIKE '{1}%' OR Location LIKE '%{1}%')", ddlteamfilter.SelectedValue, txtLocationfilter.Text);
}
else if (txtEmployeefilter.Text != "")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format("(Location LIKE '{0}%' OR Location LIKE '%{0}%') AND (Name LIKE '{1}%' OR Name LIKE '%{1}%')", txtLocationfilter.Text, txtEmployeefilter.Text);
}
else
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format("Location LIKE '{0}%' OR Location LIKE '%{0}%'", txtLocationfilter.Text);
}
gvEmployee.DataBind();
}
protected void txtEmployeefilter_TextChanged(object sender, EventArgs e)
{
BindEmployeeGridView();
if (txtLocationfilter.Text != "" && ddlteamfilter.SelectedValue != "ALL")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format("(Location LIKE '{0}%' OR Location LIKE '%{0}%') AND Team = '{1}' AND (Name LIKE '{2}%' OR Name LIKE '%{2}%')", txtLocationfilter.Text, ddlteamfilter.SelectedValue, txtEmployeefilter.Text);
}
else if (ddlteamfilter.SelectedValue != "ALL")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format(" Team = '{0}' AND (Name LIKE '{1}%' OR Name LIKE '%{1}%')", ddlteamfilter.SelectedValue, txtEmployeefilter.Text);
}
else if (txtLocationfilter.Text != "")
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format("(Location LIKE '{0}%' OR Location LIKE '%{0}%') AND (Name LIKE '{1}%' OR Name LIKE '%{1}%')", txtLocationfilter.Text, txtEmployeefilter.Text);
}
else
{
(gvEmployee.DataSource as DataTable).DefaultView.RowFilter = string.Format("Name LIKE '{0}%' OR Name LIKE '%{0}%'", txtEmployeefilter.Text);
}
gvEmployee.DataBind();
}
}

Step 5

Run application.

Filter With Team

Now Apply Location Filter

Now Apply EmployeeName Filter

Apply Only Location Filter

Apply Only EmployeeName Filter

I hope this helps.

Thank you.