Gridview Column Filter

As per your question and your provided link, if you want to do same for easy way in asp.net c# or vb.net please refer below code you will get as you want.

https://www.aspforums.net/Threads/875362/Filter-GridView-with-multiple-DropDownList-in-HeaderTemplate-using-C-and-VBNet-in-ASPNet/

Thanks.

Ashish Jain

Reply

Gopi.MCA

Member

219 Points

507 Posts

Re: Gridview Column Filter

Aug 01, 2019 06:14 PM|Gopi.MCA|LINK

Hi

Yes same but multi select may be possible in each column

Reply

Gopi.MCA

Member

219 Points

507 Posts

Re: Gridview Column Filter

Aug 02, 2019 12:25 PM|Gopi.MCA|LINK

Hi

How to apply this to my gridview

Please check this link

https://www.jqueryscript.net/table/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin.html

Thank You

Reply

vinz

All-Star

102952 Points

19469 Posts

MVP

Re: Gridview Column Filter

Aug 02, 2019 07:12 PM|vinz|LINK

GridView is a server-side Data Representation control and it is intended to be manipulated at the server. While injecting JavaScript to do client-side filtering will work, still it will requires you alot of code plumbing to connect the pieces together to make them work.

If you really want a more responsive Grid with client-side filtering then you may want to take a look at Bootstrap grid or DataTables instead: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

Vincent Maverick Durano
Microsoft MVP, CodeProject MVP, C# Corner MVP
Blog | Twitter | Linkedin

Reply

Gopi.MCA

Member

219 Points

507 Posts

Re: Gridview Column Filter

Aug 03, 2019 05:30 AM|Gopi.MCA|LINK

Hello Vinz

Thank You For Your Reply

It Would Be Best If i get small example with complete code

So that in future it will be useful for others as well

Thanking You

Reply

Gopi.MCA

Member

219 Points

507 Posts

Re: Gridview Column Filter

Aug 05, 2019 04:31 AM|Gopi.MCA|LINK

Hi

It would be very helpful if any one give me this complete code it will help other as well

I seen this link i want this same

https://www.jqueryscript.net/table/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin.html

In gridview or repater anything is okay

Thank you

Reply

vinz

All-Star

102952 Points

19469 Posts

MVP

Re: Gridview Column Filter

Aug 05, 2019 04:37 PM|vinz|LINK

Gopi.MCA
It Would Be Best If i get small example with complete code

We are not here to write complete code for your needs. That's your job. We are here to just guide you on what to do. I may provide code but minimal to the context of the question being asked. Your question and requirement is very complex and it's hard to give you full-blown code because we also work for a living just like you and we don't have time to do it. Please note that most folks here are just a volunteer.

If you just read, follow and understand the link that you found and I provided, you should be able to learn how to do the basic and then tailor that from there to meet your requirement. Now, if you are stuck why trying to follow the tutorial, then feel free to write your queries in the forums and make sure to follow the guidelines highlighted here: Programming Problems and Finding Solution.

Here's one that I found that uses GridView: http://www.dotnettwitter.com/2012/08/filtering-on-each-column-in-gridview-as.html

Good luck.

Vincent Maverick Durano
Microsoft MVP, CodeProject MVP, C# Corner MVP
Blog | Twitter | Linkedin

Reply

samwu

Contributor

2840 Points

1194 Posts

Re: Gridview Column Filter

Aug 06, 2019 11:05 AM|samwu|LINK

Hi Gopi.MCA,

According to your requirements, here is a demo for your reference.

In the listbox SelectedIndexChanged event, I filtered the data base on select value.

And then call the SelectedIndexChanged event in jquery for multiple select.

aspx:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" />
    <script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=lstCountries]').multiselect({ includeSelectAllOption: true });
        });
        function CallSelectedIndexChanged() {
            __doPostBack("#ddlFruits", "");
        }
    </script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField HeaderText="Contact Name" DataField="ContactName" />
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <asp:ListBox ID="lstCountries" runat="server" SelectionMode="Multiple" OnSelectedIndexChanged="Country_Changed">
                                <asp:ListItem Text="c1" Value="c1"></asp:ListItem>
                                <asp:ListItem Text="c2" Value="c2"></asp:ListItem>
                                <asp:ListItem Text="c3" Value="c3"></asp:ListItem>
                                <asp:ListItem Text="c4" Value="c4"></asp:ListItem>
                                <asp:ListItem Text="c5" Value="c5"></asp:ListItem>
                            </asp:ListBox>                           
                            <input type="button" onclick="CallSelectedIndexChanged()" value="Filter" />
                            <asp:LinkButton ID="lnkFake" runat="server" />

                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("Country") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>


aspx.cs:

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindGrid();
            }
        }

        private void BindGrid()
        {

            string query = "SELECT ContactName, Country FROM Customers";
            GridView1.DataSource = GetDataTable(query);
            GridView1.DataBind();
        }

        protected void Country_Changed(object sender, EventArgs e)
        {
            string query = "SELECT ContactName, Country FROM Customers";
            ListBox lb = GridView1.HeaderRow.FindControl("lstCountries") as ListBox;
            string condition = string.Empty;
            foreach (ListItem item in lb.Items)
            {
                condition += item.Selected ? string.Format("'{0}',", item.Value) : "";
            }

            if (!string.IsNullOrEmpty(condition))
            {
                condition = string.Format(" WHERE Country IN ({0})", condition.Substring(0, condition.Length - 1));
            }

            GridView1.DataSource = GetDataTable(query + condition);
            GridView1.DataBind();
        }

        private DataTable GetDataTable(string query)
        {
            string conString = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=CaseTest;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False";
            using (SqlConnection con = new SqlConnection(conString))
            {
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
                    {
                        cmd.Connection = con;
                        using (DataTable dt = new DataTable())
                        {
                            sda.Fill(dt);

                            return dt;
                        }
                    }
                }
            }
        }

The result:

Best regards，

Sam

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

Gopi.MCA

Member

219 Points

507 Posts

Re: Gridview Column Filter

Aug 13, 2019 08:41 AM|Gopi.MCA|LINK

Hisamwu

Thank you so much for your code.

If its difficult to achieve this

http://www.dotnettwitter.com/2012/08/filtering-on-each-column-in-gridview-as.html?m=1

in gridview can we with any others control

Thank You

Reply

samwu

Contributor

2840 Points

1194 Posts

Re: Gridview Column Filter

Aug 15, 2019 07:05 AM|samwu|LINK

Hi Gopi.MCA，

If you want to do the style you want, you can only use some special plugins.

such as bootstrap-multiselect or sumoselect etc , and you want to filter the gridview without postback.

I suggest you try to use javascript . Here's a demo you can use as a reference.

https://www.aspforums.net/Threads/117836/Filter-GridView-using-javaScript-in-ASPNet/

Best regards,

Sam

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Gridview Column Filter [Answered]RSS

10 replies

Shortcuts

Related Links