This is a migrated thread and some comments may be shown as answers.

Expand Collapse Image for Nested Grid

1 Answer 69 Views
Grid
This is a migrated thread and some comments may be shown as answers.
KeDaR
Top achievements
Rank 1
KeDaR asked on 30 May 2016, 06:14 AM
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>

1 Answer, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 01 Jun 2016, 11:49 AM
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.
Tags
Grid
Asked by
KeDaR
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or