problem with quicksearch.js plug-in with multiple column gridview search[Answered] RSS

• • Reply
  bukkybu

  Member

  2 Points

  33 Posts

  problem with quicksearch.js plug-in with multiple column gridview search

  Jul 26, 2015 09:40 AM|bukkybu|LINK

  I found a tutorial here on how to use the quicksearch.js plug-in to filter multiple columns in gridview .  It works in that it filters each column individually.  That is, if I filter on a column, that column filters as expected.  But when I try to further filter on a another column, the first column's filter is lost.  The demo on the tutorial retains each columns filter and continues to limit the records based on additional column filters.  I am not strong in javascript or jquery.  I would also like to fix the gridview header position while scrolling if anyone knows right off, but my priority for this post is the filter.  Any assistance is greatly appreciated.  Here's my code.

  ASP

  <asp:Panel runat="server" ID="pnl">
     <div style="overflow:auto; max-height:200px;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <asp:GridView ID="grdList" runat="server" AutoGenerateColumns="False" DataKeyNames="MyKey" CssClass="table table-bordered table-hover table-condensed" EmptyDataText="No Records" ShowHeaderWhenEmpty="True" Height="200px" OnSelectedIndexChanged="grdList_SelectedIndexChanged" OnDataBound="grdList_DataBound">
             <Columns>
                <asp:BoundField DataField="MyKey" Visible="false" ReadOnly="true" />
                <asp:BoundField DataField="Number" SortExpression="Number" Visible="True" HeaderText="My #"/>
                <asp:BoundField DataField="MyDateTime" SortExpression="MyDateTime" Visible="True" HeaderText="My Date"/>
                <asp:BoundField DataField="MyPeople" SortExpression="MyPeople" Visible="True" HeaderText="My People"/>
                <asp:BoundField DataField="MyStatus" SortExpression="MyStatus" Visible="True" HeaderText="My Status"/>
             </Columns>
        </asp:GridView>
    </div>
  </asp:Panel>

  Javascript

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="../Scripts/js/jquery.quicksearch.js"></script>
  <script type="text/javascript">
      $(function () {
          $('.search_textbox').each(function (i) {
              $(this).quicksearch("[id*=grdList] tr:not(:has(th))", {
                  'testQuery': function (query, txt, row) {
                      return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                  }
              });
          });
      });
  </script>

  C#

  protected void grdList_DataBound(object sender, EventArgs e)
          {
              GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
              for (int i = 0; i < grdList.Columns.Count; i++)
              {
                  if (grdList.Columns[i].Visible == true)
                  {
                      TableHeaderCell cell = new TableHeaderCell();
                      TextBox txtSearch = new TextBox();
                      txtSearch.Attributes["placeholder"] = grdList.Columns[i].HeaderText;
                      txtSearch.CssClass = "form-control";
                      cell.Controls.Add(txtSearch);
                      row.Controls.Add(cell);
                  }
              }
              grdList.HeaderRow.Parent.Controls.AddAt(1, row);
          }

• • Reply
  Nan Yu

  All-Star

  18815 Points

  3831 Posts

  Re: problem with quicksearch.js plug-in with multiple column gridview search

  Jul 27, 2015 07:32 AM|Nan Yu|LINK

  Hi bukkybu ,

  bukkybu

  But when I try to further filter on a another column, the first column's filter is lost. 

  I test the demo from the tutorial ,it seems that quicksearch.js cannot fit multi conditions for gridview:

  

  If you want multi column filter gridview,please refer to links below:

  http://www.codeproject.com/Articles/700874/Multi-Column-Filter-GridView-With-Effective-Paging .

  http://www.codeproject.com/Articles/26969/GridView-Multiple-Filter-AJAX-Control .

  bukkybu

  I would also like to fix the gridview header position while scrolling if anyone knows right off

  You could write a CSS property using class selector method and apply for header in gridview ,please click here for details and demo .

  Best Regards,

  Nan Yu