Expand one item at a time in RadGrid with HierarchyLoadMode set to Client

1 posts, 0 answers
  1. Attila Antal
    Attila Antal avatar
    561 posts

    Posted 08 Jun 2018 Link to this post


    Telerik Product and Version


    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    ASP.NET, JavaScript

    Code Library sample describing how to expand one item at a time in RadGrid when the HierarchyLoadMode property is set to Client.

    Since the client load mode will render both the Master and Detail tables, expanding an item will fire the client events such as OnHierarchyExpandingOnHierarchyExpandedOnHierarchyCollapsing and OnHierarchyCollapsed

    To ensure that there is only one item expanded at a time, we will use the OnHierarchyExpanding client event to iterate through all the grid items on the current page and collapse them all if they are expanded.


    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" OnNeedDataSource="RadGrid1_NeedDataSource" OnDetailTableDataBind="RadGrid1_DetailTableDataBind">
        <MasterTableView HierarchyLoadMode="Client">
            <ClientEvents OnHierarchyExpanding="hierarchyExpanding" />


    JavaScript - hierarchyExpanding event handler
    <script type="text/javascript">
        function hierarchyExpanding(sender, args) {
            var dataItems = sender.MasterTableView.get_dataItems();
            for (var i = 0; i < dataItems.length; i++) {
                if (dataItems[i].get_expanded()) {


Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.