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

Thread is closed for posting
1 posts, 0 answers
  1. 0FB9D9BC-DE82-4A54-A0D4-6034D3C617C0
    0FB9D9BC-DE82-4A54-A0D4-6034D3C617C0 avatar
    631 posts
    Member since:
    Apr 2022

    Posted 08 Jun 2018 Link to this post

    Requirements

    Telerik Product and Version

    		 3.5+

    Supported Browsers and Platforms

    		 All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    		 ASP.NET, JavaScript


    PROJECT DESCRIPTION 
    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 OnHierarchyExpanding, OnHierarchyExpanded, OnHierarchyCollapsing and OnHierarchyCollapsed. 

    SOLUTION 
    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.

    Markup

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

     

    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()) {
                    dataItems[i].set_expanded(false);
                }
            }
        }
    </script>


     

Back to Top

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