Client side loading of hierarchical grid.

[Yogendra]

Dear All, 

This is my first post here. 

We have a 4 level hierarchical data. The data for all the 4 levels is loaded from javascript using page methods. 
The data hierarchy is as follows. Specimen -->Part-->Block-->Slide.

I could get the Specimen and the Part thing working. I am stuck on loading the 3rd level (the Block Data). 

Here are the issues I am facing:-

1. If I provide the DataKeyNames and ClientDataKeyNames property on the grid for Parts, the rendering fails with the message 'PartID is not a column or a relation in the table'. I cannot even provide the HierarchyLoadMode on the grid.  Without the hierarchyLoadMode, when the Part is expanded, the hierarchyExpanding event does not fire. Instead the command event fires. 

Here is the file. If needed I can post a subset of the application

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">


    <script type="text/javascript" language="javascript">

        function createCallBack(tableView, div) {
            return function(result) {
                if (result != null && div != null) {
                    div.style.display = "block";
                }

                tableView.set_dataSource(result);
                tableView.dataBind();
                if (result.count != null) {
                    tableView.set_virtualItemCount(result.Count);
                }
            };
        }


        function createPartsCallBack(tableView, div) {
            return function(result) {
                if (result != null && div != null) {
                    div.style.display = "block";
                }
                tableView.set_dataSource(result.Parts);
                tableView.dataBind();
                if (result.Count != null) {
                    tableView.set_virtualItemCount(result.Count);
                }
            };
        }

        /*functions for specimen History Start*/
        function loadSpecimenHistory() {
            var tblView = $find("<%=radGridHistory.ClientID %>").get_masterTableView();
            var divHistory = document.getElementById('divHistory');

            //Pass in the selected Specimen Id
            var result = PageMethods.FindSpecimen(20, createCallBack(tblView, divHistory));
        }

        function radGridHistory_hierarchyExpanding(sender, args) {
            var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];

            if (firstClientDataKeyName == "SpecimenID") {
                var tblView = $find("<%= radGridHistory.Items(0).ChildItem.NestedTableViews(0).ClientID%>");
                var currentPageIndex = tblView.get_currentPageIndex();
                var pageSize = tblView.get_pageSize();
                var sortExpressionsAsSQL = tblView.get_sortExpressions().toString();
                var filterExpressionsAsSQL = tblView.get_filterExpressions().toString();
                var result = PageMethods.FindSpecimenHistoryParts(args.getDataKeyValue(firstClientDataKeyName),
                                                                   currentPageIndex * pageSize,
                                                                   pageSize,
                                                                   sortExpressionsAsSQL,
                                                                   filterExpressionsAsSQL,
                                                                   createPartsCallBack(tblView,null));
            }
        }

        //Grid command invoked (sort)
        function radGridHistory_command(sender, args) {
            args.set_cancel(true);
            if (args.get_commandName() == "ExpandCollapse") {
                var tblView = $find("<%= radGridHistory.Items(0).ChildItem.NestedTableViews(0).ClientID%>");
            }


            var tblView = args.get_tableView();
            var tableName = tblView.get_name()
            var specimenId = sender.get_masterTableView().get_dataItems()[0].get_dataItem().SpecimenID;
            if (tableName == "Parts") {
                var pageSize = tblView.get_pageSize();
                var sortExpressionsAsSQL = tblView.get_sortExpressions().toString();
                var filterExpressionsAsSQL = tblView.get_filterExpressions().toString();
                var currentPageIndex = tblView.get_currentPageIndex();
                var result = PageMethods.FindSpecimenHistoryParts(specimenId,
                                                                   currentPageIndex * pageSize,
                                                                   pageSize,
                                                                   sortExpressionsAsSQL,
                                                                   filterExpressionsAsSQL,
                                                                   createPartsCallBack(tblView, null));
            }
        }


        /*functions for specimen History END*/




    </script>
    </telerik:RadCodeBlock>

<div id="divHistory" style="display:none">
        <telerik:RadGrid ID="radGridHistory" runat="server" EnableViewState="False" AllowSorting="True"
            GridLines="None" ShowStatusBar="false" >
            <ClientSettings AllowExpandCollapse="true">
                <ClientEvents OnHierarchyExpanding="radGridHistory_hierarchyExpanding" OnCommand="radGridHistory_command" />
            </ClientSettings>
            <PagerStyle Mode="NumericPages" AlwaysVisible="true"></PagerStyle>
            <MasterTableView AllowMultiColumnSorting="false" TableLayout="Fixed" HierarchyLoadMode="Client"
                DataKeyNames="SpecimenID" ClientDataKeyNames="SpecimenID" AllowPaging="false"
                Width="100%">
                <DetailTables>
                    <telerik:GridTableView Width="100%" Name="Parts" PageSize="4" AllowPaging="true"
                        AllowCustomPaging="true" >
                        <DetailTables>
                            <telerik:GridTableView Width="100%" Name="Blocks" PageSize="4" AllowPaging="true"
                                AllowCustomPaging="true" >
                                <Columns>
                                    <telerik:GridBoundColumn SortExpression="BlockID" HeaderText="BlockID" HeaderButtonType="TextButton"
                                        DataField="BlockID" UniqueName="BlockID">
                                    </telerik:GridBoundColumn>
                                </Columns>

                            </telerik:GridTableView>
                        </DetailTables>
                        <Columns>
                            <telerik:GridBoundColumn SortExpression="PartID" HeaderText="PartID" HeaderButtonType="TextButton"
                                DataField="PartID" UniqueName="PartID">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="Name" HeaderText="Part Name" HeaderButtonType="TextButton"
                                DataField="Name">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <PagerStyle AlwaysVisible="True" Mode="NumericPages"></PagerStyle>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="SpecimenID" HeaderText="SpecimenID" HeaderButtonType="TextButton"
                        DataField="SpecimenID" />
                    <telerik:GridBoundColumn SortExpression="SpecimenName" HeaderText="Specimen Name"
                        HeaderButtonType="TextButton" DataField="SpecimenName" />
                </Columns>
                <PagerStyle AlwaysVisible="True"></PagerStyle>
            </MasterTableView>
        </telerik:RadGrid>
    </div>

Would really appreciate if someone can look into this and help me out.

Thanks in advance.

[Maria Ilieva]

Hi Yogendra,

Note that hierarchical structures with the client side data binding  is not supported appraoch out-of-the-box. Possible solutions are presented in this blog post.

All the best,
Maria Ilieva
the Telerik team