locked
Nested Grid - Make child grid column width and align colum as parent grid RRS feed

  • Question

  • User1587720337 posted

    I am working on the nested grid and able to display the child grid data when i click on the expand button. 

    Problem:   All child grid column is showing in the second column of the parent grid, I want to align child grid column to each parent grid column. Attaching the image for the reference:   https://ibb.co/121LKz0

    ASPX Coding:

    <style type="text/css">
    body
    {
    font-family: Times New Roman;
    font-size: 10pt;
    }
    .Grid th
    {
    background-color: #DF7401;
    color: White;
    font-size: 10pt;
    line-height:200%;
    }
    .Grid td
    {
    background-color: #F3E2A9;
    color: black;
    font-size: 10pt;
    line-height:200%;
    text-align:center;
    }
    .ChildGrid th
    {
    background-color: Maroon;
    color: White;
    font-size: 10pt;
    }
    .ChildGrid td
    {
    background-color: Orange;
    color: black;
    font-size: 10pt;
    text-align:center;
    }
    </style>

    <asp:GridView ID="gvGrid" runat="server" CellPadding="4" AllowPaging="True" AutoGenerateColumns="False" Font-Size="16px" PageSize="12" OnRowDataBound="gvGrid_OnRowDataBound" ShowHeader="true" OnPageIndexChanging="gvGrid_PageIndexChanging" OnSorting="gvGrid_Sorting" AllowSorting="true" DataKeyNames="TMTMSGID" OnRowCommand="gvGrid_RowCommand1" CssClass="Grid">

    <Columns>

    <asp:TemplateField ItemStyle-VerticalAlign="Top" ItemStyle-Width="20px">

    <ItemTemplate>
    <asp:ImageButton runat="server" ID="btnExpand" CommandArgument='<%# Eval("TMTMSGID") %>'
    CommandName="Select"
    Text="Select" ImageUrl="~/App_Themes/Images/grow.png" Width="20" Height="20" />
    <asp:ImageButton runat="server" ID="btnCollapse" CommandArgument='<%# Eval("TMTMSGID") %>'
    CommandName="DeSelect"
    Text="Show All" Visible="false" ImageUrl="~/App_Themes/Images/minus.png" Width="20" Height="20" />


    </ItemTemplate>
    </asp:TemplateField>


    <asp:TemplateField HeaderText="Sent From " SortExpression="SenderName">

    <ItemTemplate>
    <asp:Label ID="lblSender" runat="server" Text='<%# Bind("SenderName") %>' ToolTip='<%# Bind("SenderNameToolTip") %>' ></asp:Label>
    <asp:Label ID="lblOutboundID" runat="server" Visible="false"></asp:Label>
    <asp:HiddenField ID="hdID" runat="server" />


    <asp:Panel ID="pnlMain" runat="server" Visible="false" >
    <br /> <br />
    <br />

    <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="TMTMSGID" OnSorting="GridView2_Sorting" AllowSorting="true" EnableSortingAndPagingCallbacks="false" ClientIDMode="Static" EnableViewState="true" OnRowDataBound="GridView2_OnRowDataBound" CssClass="ChildGrid">

    <Columns>
    <asp:TemplateField HeaderText="Response From" ControlStyle-Font-Bold="false" HeaderStyle-Font-Bold="false" SortExpression="SenderNameWithPhone">

    <ItemTemplate>

    <asp:HiddenField ID="hdSenderPhoneNumber" runat="server" Value='<%# Bind("Phone1") %>' />
    <asp:HiddenField ID="hdClientPhoneNumber" runat="server" Value='<%# Bind("ClientMsgPhone1") %>' />
    <asp:HiddenField ID="hdTMTMsgID" runat="server" Value='<%# Bind("TMTMsgID") %>' />
    <asp:Label ID="lblContact" runat="server" Text='<%# Eval("SenderName") %>' ToolTip='<%# Eval("SenderNameWithPhone") %>'></asp:Label>

    </ItemTemplate>
    </asp:TemplateField>

    <%-- <asp:TemplateField HeaderText="Date/Time" ControlStyle-Font-Bold="false" HeaderStyle-Font-Bold="false" SortExpression="SentDatetime">

    <ItemTemplate>
    <asp:Label ID="lblSentDatetime" runat="server" Text='<%# Eval("SentDatetime") %>' ToolTip='<%# Eval("SentDatetime") %>'></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>--%>

    </Columns>
    </asp:GridView>

    </asp:Panel>


    </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Date/Time" SortExpression="SentDateTime">

    <ItemTemplate>
    <asp:Label ID="lblSentDateTime" runat="server" Text='<%# Bind("SentDateTime") %>' ToolTip="Date/Time the message was sent" Width="150px"></asp:Label>
    <asp:HiddenField ID="hdImages" runat="server" Value='<%# Bind("TMTMsgID") %>' />
    </ItemTemplate>

    </asp:TemplateField>

    <asp:TemplateField HeaderText="Outbound Message" SortExpression="MsgTxt">

    <ItemTemplate>
    <asp:Label ID="lblMsgTxt" runat="server" Height="20" Text='<%# Bind("MsgTxt") %>' ToolTip="Message Text"></asp:Label>

    </ItemTemplate>

    </asp:TemplateField>

    <asp:TemplateField HeaderText="Outbound Media" SortExpression="SenderName">

    <ItemTemplate>
    <asp:DataList ID="dlImages" RepeatDirection="Horizontal" runat="server" CellPadding="15" CellSpacing="15" align="left">
    <ItemTemplate>
    <a href="MediaLibraryActualImageDialog.aspx?ImageUrl=<%# DataBinder.Eval(Container.DataItem, "ImageURL") %>&ID=0" style="font-size: 14px !important; width: 20px !important;" target="_blank" onclick="window.open('MediaLibraryActualImageDialog.aspx?ImageUrl=<%# DataBinder.Eval(Container.DataItem, "ImageURL") %>', 'myWin', 'toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=yes', 'width=530, height=80, left='+((screen.width - 530) / 2)+', top=' + ((screen.heigth - 80) / 2)); return false">

    <asp:ImageButton ID="lblID" runat="server" ImageUrl='<%# Bind("ImageURL") %>' Width="50" Height="50" Visible='<%# Eval("ImageURL")!=DBNull.Value %>'></asp:ImageButton></a>
    </ItemTemplate>
    </asp:DataList>
    </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="&nbsp;&nbsp;Duration" SortExpression="MsgExpireTime" HeaderStyle-HorizontalAlign="Center">

    <ItemTemplate>
    <asp:Label ID="lblExpireTime" runat="server" Text='<%# Bind("MsgExpireTime") %>' ToolTip="Duration (minutes) allowed for a reply to the message" ></asp:Label>

    </ItemTemplate>

    </asp:TemplateField>

    <asp:TemplateField HeaderText="&nbsp;&nbsp;&nbsp;Replies" SortExpression="SenderName" HeaderStyle-HorizontalAlign="Center">

    <ItemTemplate>
    <asp:Label ID="lblRecipients" runat="server" Text='<%# Bind("CountMessage") %>' ToolTip="Recipients / Replies"></asp:Label>
    </ItemTemplate>

    </asp:TemplateField>


    </Columns>
    </asp:GridView>

    Any idea how we can align the child grid column to parent grid column

    Thursday, April 9, 2020 5:22 AM

Answers

  • User-1330468790 posted

    Hi Srishti Bharti,

      

    I believe that I have replied one of your posts in which you used jquery to copy the content of the child grid and append it to the next sibling row. 

    Links is here: https://forums.asp.net/t/2164526.aspx

     

    GridView has nothing to do with your problem so that the jquery/javascript might be the only workaround to make the child-grid's columns align with the parent's.

    • Do data binding to the child grid view and hide it.
    • Click the expand button and copy the content to the next row of the parent's.

    Note that I didn't hide the original child grid view to provide you with a comparison for you in above link. You could hide the child grid by setting the visibility property in code-behind.

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 6:18 AM