Click here to Skip to main content
15,902,275 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a nested gridview and I am trying to filter the gridview rows by a search textbox using jquery.

Here is my code:-
<input type="text" id="SearchGV" class="SearchTextBox" placeholder="Type to Search" />

<asp:GridView ID="gvdata" runat="server" AutoGenerateColumns="false" border="0" DataKeyNames="Id" CssClass="SearchGridViewData">
    <asp:BoundField HeaderText="S.No." DataField="SNo" ItemStyle-Width="20px" />
    <asp:TemplateField ItemStyle-Width="20px">
        <a href="JavaScript:shrinkandgrow('div<%# Eval("Id") %>');">
            <img alt="Details" id="imgdiv<%# Eval("Id") %>" src="/images/plus.png" />
        <div id="div<%# Eval("Id") %>" style="display: none;"> 
            <asp:GridView ID="gvinnerdata" runat="server" AutoGenerateColumns="false" DataKeyNames="Id" >
                <asp:TemplateField HeaderText="SOPID" Visible="true">
                    <asp:Label ID="lblId" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
                <asp:BoundField HeaderText="Name" DataField="Name" />

My jquery is working fine but I am facing 2 issues.
  1. On filtering nested gridview header also hide.
  2. Filtering not working if I type in textbox after expand the gridview.

Could someone suggest me the solution.

What I have tried:

var $rows1 = $('.SearchGridViewData tbody tr');
$('.SearchTextBox').keyup('input', function () {
    var val1 = $.trim($('.SearchTextBox').val()).replace(/ +/g, ' ').toLowerCase();
    $ () {
        var text1 = $(this).find('td:nth-child(n)').text().replace(/\s+/g, ' ').toLowerCase();

        return ! ~text1.indexOf(val1) ;
Updated 19-Jun-20 4:03am
F-ES Sitecore 19-Jun-20 8:15am    
What does "shrinkandgrow" look like?
TCS54321 19-Jun-20 8:19am    
it's is only for showing Plus and Minus image when expand gridview. you just ignore this function.

1 solution

Your rows selector selects every tr which is within a tbody inside your SearchGridViewData element.

The nested grid is within the tbody of the outer grid. Therefore, it is matched by the selector.

Try changing the selector to select tr elements which are immediate children of the tbody instead:
var $rows1 = $('.SearchGridViewData tbody > tr');
There's also no point in using :nth-child(n), since that just selects all children. Using td as your selector will have the same effect.
var text1 = $(this).find('td')...

NB: Rather than writing:
return ! ~text1.indexOf(val1) ;
it would be much clearer to write:
return text1.indexOf(val1) !== -1;
Share this answer
TCS54321 20-Jun-20 1:15am    
tnx for your support. you suggestions work for me.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900