Hiding the expand/collapse images when no records
You may want to hide the expand/collapse images when there are no records under parent grid item and the HierarchyLoadMode = ServerBind or HierarchyLoadMode = Client options for loading grid hierarchy are chosen. To accomplish this task you need to:
-
Wire the PreRender event of Telerik RadGrid
-
Traverse all grid items and get reference to those which are of type GridNestedViewItem
-
Verify whether their NestedTableViews collection is empty
-
If so, locate the expand/collapse image inside the ExpandCollapse column of the respective GridTableView
-
Hide the image along with the corresponding GridNestedViewItem
Below is the code of a simple demo with two level hierarchy:
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" Width="95%"
AutoGenerateColumns="False" PageSize="3" AllowPaging="True" OnPreRender="RadGrid1_PreRender">
<MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" Width="100%"
HierarchyLoadMode="ServerBind">
<PagerStyle Mode="NumericPages" />
<DetailTables>
<telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%"
runat="server">
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
</ParentTableRelation>
<Columns>
<telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
DataField="OrderID" UniqueName="OrderID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
DataField="OrderDate" UniqueName="OrderDate">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"
DataField="EmployeeID" UniqueName="EmployeeID">
</telerik:GridBoundColumn>
</Columns>
<PagerStyle Mode="NumericPages" />
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
DataField="CustomerID" UniqueName="CustomerID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
DataField="ContactName" UniqueName="ContactName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
DataField="CompanyName" UniqueName="CompanyName">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers"
runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"
runat="server">
<SelectParameters>
<asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />
</SelectParameters>
</asp:SqlDataSource>
In order to hide the expand/collapse images in multiple nested levels, you will need to perform a recursive loop through each table in depth. How to traverse the grid items in such manner you can learn from this topic.