locked
Gridview Column Filter RRS feed

Answers

All replies

  • User-1038772411 posted

    Hello, Gopi.MCA

    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.

    Thursday, August 1, 2019 10:19 AM
  • User-807418713 posted
    Hi

    Yes same but multi select may be possible in each column
    Thursday, August 1, 2019 6:14 PM
  • User-807418713 posted
    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
    Friday, August 2, 2019 12:25 PM
  • User-1034726716 posted

    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

    Friday, August 2, 2019 7:12 PM
  • User-807418713 posted

    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

    Saturday, August 3, 2019 5:30 AM
  • User-807418713 posted
    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
    Monday, August 5, 2019 4:31 AM
  • User-1034726716 posted

    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. 

    Monday, August 5, 2019 4:37 PM
  • User288213138 posted

    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

    Tuesday, August 6, 2019 11:05 AM
  • User-807418713 posted
    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
    Tuesday, August 13, 2019 8:41 AM
  • User288213138 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 15, 2019 7:05 AM