Click here to Skip to main content
14,984,270 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:-
ASPX
<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">
<Columns>
    <asp:BoundField HeaderText="S.No." DataField="SNo" ItemStyle-Width="20px" />
    <asp:TemplateField ItemStyle-Width="20px">
    <ItemTemplate>
        <a href="JavaScript:shrinkandgrow('div<%# Eval("Id") %>');">
            <img alt="Details" id="imgdiv<%# Eval("Id") %>" src="/images/plus.png" />
        </a>
        <div id="div<%# Eval("Id") %>" style="display: none;"> 
            <asp:GridView ID="gvinnerdata" runat="server" AutoGenerateColumns="false" DataKeyNames="Id" >
            <Columns>
                <asp:TemplateField HeaderText="SOPID" Visible="true">
                <ItemTemplate>
                    <asp:Label ID="lblId" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
                </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Name" DataField="Name" />
            </Columns>                                                
            </asp:GridView>
        </div>
    </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

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:

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

        return ! ~text1.indexOf(val1) ;
    }).hide();
});
Posted
Updated 19-Jun-20 4:03am
v3
Comments
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:
JavaScript
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.
JavaScript
var text1 = $(this).find('td')...

NB: Rather than writing:
JavaScript
return ! ~text1.indexOf(val1) ;
it would be much clearer to write:
JavaScript
return text1.indexOf(val1) !== -1;
   
v2
Comments
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