locked
I have 7 columns in gridview RRS feed

  • Question

  • User-807418713 posted

    Hello

    I have 7 Columns In Gridview I Want Excel like multi filter 

    how to do using jquery without postback

    Thank You

    Friday, July 12, 2019 3:22 AM

Answers

  • User288213138 posted

    Hi Gopi.MCA,

    Do you want adding a vertical scrollbar to the ListBox?

    if so,you can try to set a fixed height and set the overflow-y property as scroll in the ul element.

    The code:

    <style>
            .dropdown-menu {
                height: 200px;
                overflow-y: scroll;
            }
        </style>

    The result:

    If I misunderstand your requirement, please post more details information about your requirement in a new thread.

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 1, 2019 9:07 AM

All replies

  • User288213138 posted

    Hi Gopi.MCA,

    According to your description, I couldn’t understand your requirement clearly.

    Do you mean you could filter the data for each column?

    If this is your requirement, I suggest you could try below codes:

    In the OnDataBound event, I create a GridView Header Row with a TextBox to filter the column.

    In jquery, I used the jquery QuickSearch Plugin to filter the values of the column.

    More information about jquery QuickSearch Plugin you can read this link: https://github.com/riklomas/quicksearch

    If I misunderstand your requirement, please feel free to post more details information about your requirement.

    The code:

    aspx:
    <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>
    <script src="../Scripts/jquery-3.3.1.js"></script>
        <script src="../Scripts/CJ/jquery.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, txt, row) {
                            return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                        }
                    });
                });
            })
        
        </script>
    
    
    Aspx.cs:
    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

    Friday, July 12, 2019 6:40 AM
  • User-807418713 posted

    Hello Samwu

    Thank You For Your Reply

    I Need This below Type Filter Using Jquery or JavaScript Which Is Like Multi Select Excel Filter As Below Without Post Back

    Thanking You

    Saturday, July 13, 2019 7:03 PM
  • User288213138 posted

    Hi Gopi.MCA,

    According to your description, I wrote a demo for your reference.

    I loop through the checked values in the listbox and put them into an array.

    It then loop through the array, finding other values for the current row based on the values in the array.

    The code:

    <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>
            $(function () {
                $('#lstCountries').multiselect({ includeSelectAllOption: true });
                var value = [];
             
                $("#Button1").click(function () {
                    $("input:checked").each(function () {
                        value.push($(this).val())               
                               });               
                    for (var i = 0; i < value.length; i++) {
                        var t1 = $('#GridView1 tr').eq(value[i]).find("td:first").text();
                        var t2 = $('#GridView1 tr').eq(value[i]).find("td:nth-child(2)").text();
                        var t3 = $('#GridView1 tr').eq(value[i]).find("td:nth-child(3)").text();
                        var markup = "<tr><td>" + t1 + "</td><td>" + t2 + "</td><td>" + t3 + "</td></tr>";
                                $("#mytable2").append(markup);                    
                    }                             
                });
                 
            });
    
        </script>
    <div>
                <asp:GridView ID="GridView1" runat="server"></asp:GridView>
                <asp:ListBox ID="lstCountries" runat="server" SelectionMode="Multiple">
                    <asp:ListItem Value="1"></asp:ListItem>
                    <asp:ListItem Value="2"></asp:ListItem>
                    <asp:ListItem Value="3"></asp:ListItem>
                    <asp:ListItem Value="4"></asp:ListItem>
                    <asp:ListItem Value="5"></asp:ListItem>
                </asp:ListBox>
                <input id="Button1" type="button" value="button" />
                <table border="1" id="mytable2">
                </table>
    

    The result:

    Best regards,

    Sam

    Tuesday, July 16, 2019 10:22 AM
  • User-807418713 posted

    Hello

    Thanks For Your Code

    It showing only if we press button but I need it should filter based on selections in listbox

    Thanking You

    Thursday, July 18, 2019 6:27 PM
  • User-807418713 posted

    Hello

    I need filter like this type without postback because we have more then 30 columns in gridview 

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

    I need this using asp.net 2.0 C# 

    Can it be done via jquery or javascript without postback 

    Monday, July 29, 2019 7:59 AM
  • User-1038772411 posted

    Hello Gopi.MCA

    As per your question you want to set filer in gridview using Jquery/Javascript Right. so please refer below artical you will get as you want.

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

    Thanks

    Monday, July 29, 2019 8:20 AM
  • User-807418713 posted

    Hello samwu

    I need filter like this type without postback because we have more then 30 columns in gridview 

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

    I need this using asp.net 2.0 C# 

    Can it be done via jquery or javascript without postback

    Thanking You

    Wednesday, July 31, 2019 5:17 AM
  • User288213138 posted

    Hi Gopi.MCA,

    It showing only if we press button but I need it should filter based on selections in listbox

    If you don't want to use the button control to trigger an event, you can try using the onchange() method.

    For the use of the onchnage method you can refer to this link:http://davidstutz.de/bootstrap-multiselect/#further-examples

    Best ragards,

    Sam

    Wednesday, July 31, 2019 10:36 AM
  • User-807418713 posted

    Hello

    Thank You For Your Reply

    Can it be done like this as shown in this tutioral becuase we have more then 20 columns we cant write each column it would be needful if we get like this format in easy method

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

    Thanking You

    Wednesday, July 31, 2019 11:47 AM
  • User288213138 posted

    Hi Gopi.MCA,

    Do you want adding a vertical scrollbar to the ListBox?

    if so,you can try to set a fixed height and set the overflow-y property as scroll in the ul element.

    The code:

    <style>
            .dropdown-menu {
                height: 200px;
                overflow-y: scroll;
            }
        </style>

    The result:

    If I misunderstand your requirement, please post more details information about your requirement in a new thread.

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 1, 2019 9:07 AM