Expand Collapse Image for Nested Grid

2 posts, 0 answers
  1. kedar
    kedar avatar
    10 posts
    Member since:
    Apr 2015

    Posted 30 May 2016 Link to this post

    I have Added

          ExpandCollapseColumn-CollapseImageUrl="../Images/1450530178_expand2.png"
          ExpandCollapseColumn-ExpandImageUrl="../Images/1450530168_next.png">

    for Expand and Collapse button image

    it's working for Parent Grid,but not showing for Nested grid

    css code and Aspx code as below ...

     
    Css Code 
            .rgExpand {
                background: url('../Images/1450530168_next.png') center center no-repeat !important;
            }

            .rgCollapse {
                background: url('../Images/1450530178_expand2.png') center center no-repeat !important;
            }

      

    Aspx code
    <telerik:RadGrid RenderMode="Lightweight" ID="radRequestStatus" runat="server" ShowStatusBar="true" MasterTableView-AllowPaging="true" AutoGenerateColumns="False"<br>                                PageSize="10" AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="false"<br>                                OnDetailTableDataBind="radRequestStatus_DetailTableDataBind" OnNeedDataSource="radRequestStatus_NeedDataSource" OnItemDataBound="radRequestStatus_ItemDataBound"<br>                                OnPreRender="radRequestStatus_PreRender" OnPageIndexChanged="radRequestStatus_PageIndexChanged"><br>                                <PagerStyle Mode="NumericPages"></PagerStyle><br>                                <MasterTableView DataKeyNames="Request_Number" ExpandCollapseColumn-ButtonType="ImageButton"<br>                                    ExpandCollapseColumn-CollapseImageUrl="../Images/1450530178_expand2.png"<br>                                    ExpandCollapseColumn-ExpandImageUrl="../Images/1450530168_next.png"><br>                                    <DetailTables><br>                                        <telerik:GridTableView DataKeyNames="Br_Issu_Surr_Key" Name="Batches" Width="100%"><br>                                            <HeaderStyle CssClass="InnerHeaderStyle" /><br>                                            <ItemStyle CssClass="InnerItemStyle" /><br>                                            <AlternatingItemStyle CssClass="InnerAlernatingItemStyle" /><br>                                            <ExpandCollapseColumn ButtonType="ImageButton"></ExpandCollapseColumn><br>                                            <DetailTables><br>                                                <telerik:GridTableView DataKeyNames="Name" Name="Templetes" Width="100%"><br>                                                    <HeaderStyle CssClass="InnerHeaderStyle" /><br>                                                    <Columns><br>                                                        <telerik:GridTemplateColumn><br>                                                            <ItemTemplate><br>                                                                <%# Container.DataSetIndex+1 %><br>                                                            </ItemTemplate><br>                                                        </telerik:GridTemplateColumn><br><br>                                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="Name" DataField="Name"><br>                                                        </telerik:GridBoundColumn><br>                                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="Number" DataField="Number"><br>                                                        </telerik:GridBoundColumn><br>                                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="Type" DataField="Type"><br>                                                        </telerik:GridBoundColumn><br>                                                    </Columns><br>                                                </telerik:GridTableView><br>                                            </DetailTables><br>                                            <Columns><br>                                                <telerik:GridTemplateColumn><br>                                                    <ItemTemplate><br>                                                        <%# Container.DataSetIndex+1 %><br>                                                    </ItemTemplate><br>                                                </telerik:GridTemplateColumn><br>                                                <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="sys" DataField="Sys"><br>                                                </telerik:GridBoundColumn><br>                                                <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="Version" DataField="Version"><br>                                                </telerik:GridBoundColumn><br>                                                <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" UniqueName="Status" HeaderText="Status" DataField="Status"><br>                                                </telerik:GridBoundColumn><br>                                            </Columns><br>                                        </telerik:GridTableView><br>                                    </DetailTables><br>                                    <Columns><br>                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="5%" HeaderText="Req.No." DataField="Number"><br>                                        </telerik:GridBoundColumn><br>                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="15%" HeaderText="C" DataField="C"><br>                                        </telerik:GridBoundColumn><br>                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="15%" HeaderText="L" DataField="L"><br>                                        </telerik:GridBoundColumn><br>                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="D" DataField="D"><br>                                        </telerik:GridBoundColumn><br>                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="L4" DataField="L4"><br>                                        </telerik:GridBoundColumn><br>                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="L5" DataField="L5"><br>                                        </telerik:GridBoundColumn><br>                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="L6" DataField="L6"><br>                                        </telerik:GridBoundColumn><br>                                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Client" DataField="Client"><br>                                        </telerik:GridBoundColumn><br>                                    </Columns><br>                                </MasterTableView><br>                            </telerik:RadGrid>
  2. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 01 Jun 2016 Link to this post

    Hi Kedar,

    When you are using a Lightweight rendering you can use the following approach to change the expand/collapse icons.
    <style>
        .RadGrid .rgCollapseIcon::before {
            display: none !important;
        }
     
        .RadGrid .rgCollapseIcon {
           background: url('icon-collapse.gif') center center no-repeat;
        }
     
        .RadGrid .rgExpandIcon::before {
            display: none !important;
        }
     
        .RadGrid .rgExpandIcon {
            background: url('icon-expand.gif') center center no-repeat;
        }
    </style>


    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top