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.