I’ve often found that our client’s web portals have way too much data on screen, so here’s a quick and easy “Filter as you type” JavaScript/jQuery block:

function SetupFilter(textboxID, gridID, columnName) {
    $('#' + textboxID).keyup(function () {
        var index;
        var text = $("#" + textboxID).val();
 
        $('#' + gridID + ' tbody tr').each(function () {
            $(this).children('th').each(function () {
                if ($(this).html() == columnName)
                    index = $(this).index();
            });
 
            $(this).children('td').each(function () {
                if ($(this).index() == index) {
                    var tdText = $(this).children(0).html() == null ? $(this).html() : $(this).children(0).html();
 
                    if (tdText.indexOf(text, 0) > -1) {
                        $(this).closest('tr').show();
                    } else {
                        $(this).closest('tr').hide();
                    }
                };
            });
        });
    });
};

Then all you need to do, after you include the above code segment in your page head or startup .js file is to call the below for each textbox you want to actively filter your grid:

$(function () { SetupFilter("myTextBox", "myGridView", "My Column Name"); });

Just make sure you reference your controls with the correct ID. By using ClientIDMode=”Static” you can ensure it’s the same ID as you defined it in the ASP.NET markup.

<asp:TextBox ID="myTextBox" runat="server" ClientIDMode="Static" />
 
<asp:GridView ID="myGridView" runat="server" AutoGenerateColumns="False" ClientIDMode="Static"
ShowHeaderWhenEmpty="True">
    <Columns>
        <asp:BoundField DataField="one" HeaderText="My first column" />
        <asp:BoundField DataField="two" HeaderText="My Column Name" />
    </Columns>
</asp:GridView>

You can even include the textbox as template fields in the grid header.

Make sure you are making use of jQuery libraries in order for this to work.

21 thoughts on “Filter GridView as you type (ASP.NET C# with jQuery)

  1. How is this called from the textbox?

    $(function () { SetupFilter(“myTextBox”, “myGridView”, “My Column Name”); });

    I have been trying to place it into the TextBox OnTextChanged event but continue getting an error “Too many characters in character literal”.

    Please help.

    • When I simply include it underneath the previous jQuery script I don’t get any errors, however, it does not filter my GridView.
      Here is my abbreviated code:

      function SetupFilter(textboxID, gridID, columnName) { … }
      $(function () { SetupFilter(“myTextBox”, “grdClient”, “clientname”); });

      <asp:HyperLink ID="searchresults" runat="server" Text='’ NavigateUrl=”>

  2. Ok, well, the previous post of my code did not display. But I have each of the parameters labeled correctly … myTextBox, grdClient, clientname are my ID values of my textbox, gridview and column name. The only other difference is that my code has 2 columns of data. I have an clientname and clientid column displayed in my grid. The textbox is targeted to filter on the clientname.

    • Can you show me the ASP.NET code of your grid and of your textbox?
      I’d like to see your IDs etc and how you hooked them together.

  3. Yes, I have posted my code to my SkyDrive account http://sdrv.ms/Vv2XG1
    It is a txt file with the jQuery script, textbox, SPDataSource, and the asp:GridView. Thank you for getting back to me. I really, really look forward to your response. :)

  4. HI

    I’m trying to use the same code to filter my gridview and I’m also experiancing the same problem experianced by Alex. Was the solution ever found for this issue and if so can you please assist.

  5. Hi, thanks for the code.
    I have a question. In the gridview I need to show the first 10 records, I do it with AllowPaging. But to do this the filter applies only to records that are displayed. How I can make the filter applies to all records? Thank you very much!

  6. Hi,

    Great article! Just I have stumbled on some conceptual bug with GridView … if Paging is enabled then searching is not working properly (as expected because it renders only as configured).

    What to do then ? Extending GridView?

    Best, Adnan

  7. Hi, can you please post the code that how to call the function from a textbox textchanged event. I am new to the Jquery, so please help me.
    My requirement:
    Binding List to a gridview.
    I have text box outside the gridview, i want to filter the gridview column as you type in the textbox.

    Please help me.

    Thanks & regards
    Yarlagadda Naveen

    • You need to add jQuery to your page, by adding this line of code somewhere inside your page, preferably in the head section:

      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

      Then, somewhere before the end of the body tag, copy/paste this:

      <script>
      function SetupFilter(textboxID, gridID, columnName) {
          $('#' + textboxID).keyup(function () {
              var index;
              var text = $("#" + textboxID).val();
       
              $('#' + gridID + ' tbody tr').each(function () {
                  $(this).children('th').each(function () {
                      if ($(this).html() == columnName)
                          index = $(this).index();
                  });
       
                  $(this).children('td').each(function () {
                      if ($(this).index() == index) {
                          var tdText = $(this).children(0).html() == null ? $(this).html() : $(this).children(0).html();
       
                          if (tdText.indexOf(text, 0) > -1) {
                              $(this).closest('tr').show();
                          } else {
                              $(this).closest('tr').hide();
                          }
                      };
                  });
              });
          });
      };
       
      $(function () { SetupFilter("myTextBox", "myGridView", "My Column Name"); });
      </script>

      Change only the 3 words myTextBox, myGridView and “My Column Name”.

      Any luck?

      • Its not working brother.
        I am posting the code in my page . Please check it out do the need full .

        function SetupFilter(textboxID, gridID, columnName) {
        $(‘#’ + textboxID).keyup(function () {
        var index;
        var text = $(“#” + textboxID).val();

        $(‘#’ + gridID + ‘ tbody tr’).each(function () {
        $(this).children(‘th’).each(function () {
        if ($(this).html() == columnName)
        index = $(this).index();
        });

        $(this).children(‘td’).each(function () {
        if ($(this).index() == index) {
        var tdText = $(this).children(0).html() == null ? $(this).html() : $(this).children(0).html();

        if (tdText.indexOf(text, 0) > -1) {
        $(this).closest(‘tr’).show();
        } else {
        $(this).closest(‘tr’).hide();
        }
        };
        });
        });
        });
        };

        $(function () { SetupFilter(“txtMasterCompanyCode”, “gvVehicleDetails”, “Master Company Code”); });

        Vehicle Code:

        • function SetupFilter(textboxID, gridID, columnName) {
          $(‘#’ + textboxID).keyup(function () {
          var index;
          var text = $(“#” + textboxID).val();

          $(‘#’ + gridID + ‘ tbody tr’).each(function () {
          $(this).children(‘th’).each(function () {
          if ($(this).html() == columnName)
          index = $(this).index();
          });

          $(this).children(‘td’).each(function () {
          if ($(this).index() == index) {
          var tdText = $(this).children(0).html() == null ? $(this).html() : $(this).children(0).html();

          if (tdText.indexOf(text, 0) > -1) {
          $(this).closest(‘tr’).show();
          } else {
          $(this).closest(‘tr’).hide();
          }
          };
          });
          });
          });
          };

          $(function () { SetupFilter(“txtMasterCompanyCode”, “gvVehicleDetails”, “Master Company Code”); });

          Vehicle Code:

  8. It worked for me. Thank you.

    But I have paging enabled on gridview. Could search only visible page. Do you have any idea, how can we search on whole Dataset?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>