locked
Help with Jquery RRS feed

  • Question

  • User-740453238 posted

    I built a form with a nested gridivew.  On the gridview there is a plus sign to expand the child view.  It then uses JQuery to check and expand.  (See below). I have an insert row in the child form as well but it is putting it in the last selected row.  Here is my question.  How can I either click on the plus, the select button, or the entire row, select the row and still expand the child view.  I tried doing it with rowdatabound.  It will select the row but closes the child.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $("[src*=plus]").live("click", function () {
     
                $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
                $(this).attr("src", "images/minus.gif");
                
    
            });
            $("[src*=minus]").live("click", function () {
                $(this).attr("src", "images/plus.gif");
                $(this).closest("tr").next().remove();
            });
        </script>

    Here is my line from gridview

       <asp:GridView ID="GridView1" runat="server" CellPadding = "5" GridLines="None" AutoGenerateColumns="False" DataKeyNames="TicketID" DataSourceID="SqlDataSource1" OnRowDataBound="OnRowDataBound" AllowPaging="True" AllowSorting="true" ShowFooter="True" PageSize="12" Font-Bold="true">
        <PagerStyle HorizontalAlign="Center" BackColor="#FFFF99" Font-Bold="True" Font-Names="Arial Black" Font-Size="XX-Large" />
            <Columns>
                <%--Column 0 Search *****************************************************--%>
                <%--GV1-Col19-Template for Gridview2***************************************************--%>
                <asp:TemplateField>
                    <ItemTemplate>
                        <img alt="" style="cursor: pointer" src="images/plus.gif" />
                        <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                            <asp:GridView ID="GridView2" runat="server" CssClass="ChildGrid" AllowPaging="True" ShowFooter="True" AllowSorting="True" EmptyDataRowStyle-BackColor="Red" ShowHeaderWhenEmpty="True" AutoGenerateColumns="False" Datakeyname="TicketID" OnRowCommand="GridView2_RowCommand" GridLines="None">
                                <Columns>
                                    <%--GV2-Col1-CommandColumn*****************************************************--%>
                                    <asp:TemplateField ShowHeader="False">
                                        <ItemTemplate>
                                            <asp:LinkButton ID="LinkButton6" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit"></asp:LinkButton>
                                            &nbsp;<asp:LinkButton ID="LinkButton7" runat="server" CausesValidation="False" CommandName="Select" Text="Select"></asp:LinkButton>
                                            &nbsp;<asp:LinkButton ID="LinkButton8" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete"></asp:LinkButton>
                                        </ItemTemplate>
                                        <EditItemTemplate>
                                            <asp:LinkButton ID="LinkButton9" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
                                            &nbsp;<asp:LinkButton ID="LinkButton10" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                                        </EditItemTemplate>
                                        <FooterTemplate>
                                            <asp:LinkButton ID="AddComment" CommandName="AddComment" runat="server" Font-Size="X-Large">Add</asp:LinkButton>
                                        </FooterTemplate>
                                        <HeaderStyle Wrap="False" />
                                        <ItemStyle Wrap="False" />
                                    </asp:TemplateField>

    Thursday, October 22, 2015 7:32 PM

Answers

  • User61956409 posted

    Hi mhinkle2,

    I built a form with a nested gridivew.  On the gridview there is a plus sign to expand the child view.  It then uses JQuery to check and expand.  (See below). I have an insert row in the child form as well but it is putting it in the last selected row.  Here is my question.  How can I either click on the plus, the select button, or the entire row, select the row and still expand the child view.  I tried doing it with rowdatabound.  It will select the row but closes the child.

    You could refer to the following code to expand the child view in select button client click event.

    <asp:LinkButton ID="LinkButton7" runat="server" CausesValidation="False" CommandName="Select" Text="Select" CssClass="btnselect"></asp:LinkButton>
    $(".btnselect").click(function () {
        //expand the child view
    });
    

    And you could check the gridview html structure using F12 developer tools, it should be rendered as <table>, you could attach a handler to client click event for data row (tr) of parent gridview to expand the child view.

    $("parentgridviewdatarow").click(function () {
        //expand the child view
    });
    

    Besides, some server controls may cause page post back, it will refresh web page, which may close the child view you opened. You could save expanded row index in hidden field, then you could re-expand the row after refreshing the page based on row index.

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 22, 2015 10:09 PM

All replies

  • User61956409 posted

    Hi mhinkle2,

    I built a form with a nested gridivew.  On the gridview there is a plus sign to expand the child view.  It then uses JQuery to check and expand.  (See below). I have an insert row in the child form as well but it is putting it in the last selected row.  Here is my question.  How can I either click on the plus, the select button, or the entire row, select the row and still expand the child view.  I tried doing it with rowdatabound.  It will select the row but closes the child.

    You could refer to the following code to expand the child view in select button client click event.

    <asp:LinkButton ID="LinkButton7" runat="server" CausesValidation="False" CommandName="Select" Text="Select" CssClass="btnselect"></asp:LinkButton>
    $(".btnselect").click(function () {
        //expand the child view
    });
    

    And you could check the gridview html structure using F12 developer tools, it should be rendered as <table>, you could attach a handler to client click event for data row (tr) of parent gridview to expand the child view.

    $("parentgridviewdatarow").click(function () {
        //expand the child view
    });
    

    Besides, some server controls may cause page post back, it will refresh web page, which may close the child view you opened. You could save expanded row index in hidden field, then you could re-expand the row after refreshing the page based on row index.

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 22, 2015 10:09 PM
  • User-740453238 posted

    Thanks for you reply.  As above I have the following JQuery to expand my child.  How do I convert to use in the example you have:

     $("[src*=plus]").live("click", function () {

                $
    (this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
                $
    (this).attr("src", "images/minus.gif");

    I tried this but it didn't work.  It will select the row but not expand the child records.

    $(".btnselect").click(function () {
          $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
                $(this).attr("src", "images/minus.gif");
    });

    Friday, October 23, 2015 2:18 PM
  • User-740453238 posted

    Anyone able to give me help with this?  Really need an answer!  Please.

    Monday, October 26, 2015 10:34 PM
  • User61956409 posted

    Hi mhinkle2,

    $(".btnselect")

    Firstly, do you specify CssClass="btnselect" for your selectbutton?

    $(".btnselect").click(function () {
          $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
                $(this).attr("src", "images/minus.gif");
    });

    Secondly, please debug your jQuery code to check if the code could be executed fine.

    Best Regards,

    Fei Han

    Wednesday, October 28, 2015 5:27 AM