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

1 posts, 0 answers
  1. Attila Antal
    Admin
    Attila Antal avatar
    88 posts

    Posted 08 Jun 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 OnHierarchyExpandingOnHierarchyExpandedOnHierarchyCollapsing 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