Jquery selectors - filtering ASP.NET gridview

Question

I've got a gridview and some checkbox controls, with the idea that only the rows with the corresponding checkboxes are shown.

I've composed this mess of JQuery/javascript which actually does work but offends my eyes, and performs terribly. Is there are a simpler and/or faster way of using the checkbox names to filter by the column text?

<script type="text/javascript">
    $(document).ready(function() {
    $('.Red input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Red')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Red')").parent().hide();
          }
      });
      $('.Green input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Green')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Green')").parent().hide();
          }
      });
      $('.Blue input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Blue')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Blue')").parent().hide();
          }
      });
  });
</script>

<span id="filtercheckboxes">
    <asp:CheckBox ID="Red" runat="server" CssClass="Red" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Red" AssociatedControlID="Red" ID="RedLabel"
        CssClass="RedLabel" />
    <asp:CheckBox ID="Green" runat="server" CssClass="Green" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Green" AssociatedControlID="Green" ID="GreenLabel"
        CssClass="GreenLabel" />
    <asp:CheckBox ID="Blue" runat="server" CssClass="Blue" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Blue" AssociatedControlID="Blue" ID="BlueLabel"
        CssClass="BlueLabel" />
</span>

The HTML output from the ASP.NET gridview looks like this:

<div class="AspNet-GridView" id="ctl00_ContentPlaceHolder1_GridView1">
    <table summary="" class="EntriesGrid">
        <thead>
            <tr class="headerrow">
                <th scope="col">header</th>
                <th scope="col">header</th>
                <th class="Colour" scope="col">header</th>
                <th scope="col">header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
                <td>data</td>
                <td class="Colour">Red</td>
                <td>data</td>
            </tr>
        </tbody>
    </table>
</div>

(This is dramatically simplified from the original, in the hope of making it easy to understand. The filtering does actually work in the original too, it's just slow and ugly...)

Do all the table cells containing the name of a colour have a class of .Colour? If you could post some of the HTML markup that's output by the Gridview control, I might be able to help. — Mark Bell
– Mark Bell, Commented Oct 5, 2009 at 16:22
Thanks Mark. Not all the cells have the class .Colour, only one column. I've posted the markup at the end of the question. — Colin Pickard
– Colin Pickard, Commented Oct 5, 2009 at 16:31

Michael Edwards · Accepted Answer · 2009-10-05 16:51:18Z

1

One thing that slows it down is the way that you have defined your selectors:

$('.Blue input:checkbox')

Because you are searching by class jQuery pretty much has to go through every item on the page first. If however you specify an ID then jQuery can skip most of the page and concentrate on a specific DOM element.

So a better selector would be:

$('#ctl00_ContentPlaceHolder1_GridView1 .Blue input:checkbox')

Of course this has the problem of getting the controls ID but if the JavaScript is on the same page you could user somethin like this:

$('#<% GridView1.ClientID %> .Blue input:checkbox')

edited Oct 5, 2009 at 16:51

answered Oct 5, 2009 at 16:44

Michael Edwards

6,6088 gold badges48 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Colin Pickard Over a year ago

OK that makes sense. If IDs are faster than classes I will see if I can get a proper ID on the table and the checkboxes.

Colin Pickard Over a year ago

I gave you the accept since I managed to make it faster, with your help. The code is still beyond ugly, but I've moved on... :)

Collectives™ on Stack Overflow

Jquery selectors - filtering ASP.NET gridview

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related