Filter GridView as you type (ASP.NET C# with jQuery)

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.

2012
05/31
POSTED BY
CATEGORY
_tech
TAGS





6 comments
    • Alex
    • January 15th, 2013

    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.

      • Alex
      • January 15th, 2013

      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=”>

    • Alex
    • January 15th, 2013

    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.

      • Eric
      • January 24th, 2013

      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.

    • Alex
    • January 24th, 2013

    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. :)

  1. No trackbacks yet.