locked
Gridview multiple column filter using jquery datatable RRS feed

All replies

  • User288213138 posted

    Hi UmerFaiz001,

    You can try to use the jQuery QuickSearch Plugin to filter the Gridview.

    Here a demo for you as a reference. Inside the OnDataBound event handler, I have created a new GridView Header Row with a TextBox in its each Cell and then added this row to the GridView. These TextBoxes will be used to search the respective GridView column on TextBox KeyPress event. you will notice that the CssClass property is set for each TextBox with value search_textbox, this has been done to apply the jQuery QuickSearch Plugin client side using the jQuery CSS class selector.

    The code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.3.1.js"></script>
        <script src="quicksearch.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.search_textbox').each(function (i) {
                    $(this).quicksearch("[id*=GridView1] tr:not(:has(th))", {
                        'testQuery': function (query, row) {
                            return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                        }
                    });
                });
            })
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound">
                    <Columns>
                        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
                        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="100" />
                        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    </html>
    
    
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
                    dt.Rows.Add(1, "name1", "country1");
                    dt.Rows.Add(2, "name2", "country2");
                    dt.Rows.Add(3, "name3", "country3");
                    dt.Rows.Add(4, "name4", "country4");
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
            protected void OnDataBound(object sender, EventArgs e)
            {
                GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                for (int i = 0; i < GridView1.Columns.Count; i++)
                {
                    TableHeaderCell cell = new TableHeaderCell();
                    System.Web.UI.WebControls.TextBox txtSearch = new System.Web.UI.WebControls.TextBox();
                    txtSearch.Attributes["placeholder"] = GridView1.Columns[i].HeaderText;
                    txtSearch.CssClass = "search_textbox";
                    cell.Controls.Add(txtSearch);
                    row.Controls.Add(cell);
                }
                GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
            }

    The result:

    Best regards,

    Sam

    Tuesday, December 3, 2019 7:31 AM
  • User-37275327 posted

    Out of the box you can use this,

    https://datatables.net/

    Wednesday, December 4, 2019 1:23 AM
  • User1910487977 posted

    Out of the box you can use this,

    https://datatables.net/

    I would like to filter each column separately.

    Wednesday, December 4, 2019 6:11 AM
  • User1910487977 posted

    Hi UmerFaiz001,

    You can try to use the jQuery QuickSearch Plugin to filter the Gridview.

    Here a demo for you as a reference. Inside the OnDataBound event handler, I have created a new GridView Header Row with a TextBox in its each Cell and then added this row to the GridView. These TextBoxes will be used to search the respective GridView column on TextBox KeyPress event. you will notice that the CssClass property is set for each TextBox with value search_textbox, this has been done to apply the jQuery QuickSearch Plugin client side using the jQuery CSS class selector.

    The code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.3.1.js"></script>
        <script src="quicksearch.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.search_textbox').each(function (i) {
                    $(this).quicksearch("[id*=GridView1] tr:not(:has(th))", {
                        'testQuery': function (query, row) {
                            return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                        }
                    });
                });
            })
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound">
                    <Columns>
                        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
                        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="100" />
                        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    </html>
    
    
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
                    dt.Rows.Add(1, "name1", "country1");
                    dt.Rows.Add(2, "name2", "country2");
                    dt.Rows.Add(3, "name3", "country3");
                    dt.Rows.Add(4, "name4", "country4");
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
            protected void OnDataBound(object sender, EventArgs e)
            {
                GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                for (int i = 0; i < GridView1.Columns.Count; i++)
                {
                    TableHeaderCell cell = new TableHeaderCell();
                    System.Web.UI.WebControls.TextBox txtSearch = new System.Web.UI.WebControls.TextBox();
                    txtSearch.Attributes["placeholder"] = GridView1.Columns[i].HeaderText;
                    txtSearch.CssClass = "search_textbox";
                    cell.Controls.Add(txtSearch);
                    row.Controls.Add(cell);
                }
                GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
            }

    The result:

    Best regards,

    Sam

    Thanks can we have pageing and sort as well. Like this https://www.ihbc.org.uk/consultationsdb_new/examples/api/multi_filter.html

    Sample pageing sorting and multi column filter https://ibb.co/sqWM97d

    Wednesday, December 4, 2019 6:17 AM
  • User288213138 posted

    Hi umerFaiz001,

    UmerFaiz001

    can we have pageing and sort as well

    This is another question, please post your question in new thread.

    You can refer to this link about filtering, pagination and sorting in Gridview: https://www.aspsnippets.com/Articles/Search-GridView-with-Paging-on-TextBox-KeyPress-using-jQuery-in-ASPNet.aspx

    You also can refer to this link about filtering, pagination and sorting in jquery datatable: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

    Best regards,

    Sam

    Wednesday, December 4, 2019 9:24 AM
  • User1910487977 posted

    Hi umerFaiz001,

    UmerFaiz001

    can we have pageing and sort as well

    This is another question, please post your question in new thread.

    You can refer to this link about filtering, pagination and sorting in Gridview: https://www.aspsnippets.com/Articles/Search-GridView-with-Paging-on-TextBox-KeyPress-using-jQuery-in-ASPNet.aspx

    You also can refer to this link about filtering, pagination and sorting in jquery datatable: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

    Best regards,

    Sam

    Thanks how to implement this for asp.net gridview 

    https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

    Thursday, December 5, 2019 5:31 AM
  • User288213138 posted

    Hi UmerFaiz001,

    Search GridView with Paging on TextBox KeyPress using jQuery in ASP.Net

    Does this demo not meet your requirement? you just need to add searched TextBox for other columns.

    Please try to write your code by yourself and let me know if you meet any problems.

    Best regards,

    Sam

    Thursday, December 5, 2019 10:53 AM