New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

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:

  1. Wire the PreRender event of Telerik RadGrid

  2. Traverse all grid items and get reference to those which are of type GridNestedViewItem

  3. Verify whether their NestedTableViews collection is empty

  4. If so, locate the expand/collapse image inside the ExpandCollapse column of the respective GridTableView

  5. Hide the image along with the corresponding GridNestedViewItem

Below is the code of a simple demo with two level hierarchy:

ASP.NET
<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.

Not finding the help you need?
Contact Support