Nested View with Client side databinding of Grid

[Mani]

I am trying to create a Master/Detail RadGrid, wherein the Grid is being populated at Client side using Web Service JSON data. I find that on setting the data source and binding through AJAX, the hierarchical data is not being generated. Can anyone please let me know what's the issue with this? Whether in the first place this use case is supported?

<telerik:RadGrid AllowFilteringByColumn="False" AllowPaging="False" AllowSorting="True" AutoGenerateColumns="False" CellPadding="0" CellSpacing="0" CssClass="gridCrossRoads" GridLines="None" ID="gridManageCases" runat="server">
    <ClientSettings AllowGroupExpandCollapse="false" EnableAlternatingItems="false" EnableRowHoverStyle="true">
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <Selecting AllowRowSelect="True" />
        <ClientEvents OnRowDataBound="GridRowBound" OnHierarchyExpanding="HierarchyExpanding"></ClientEvents>
    </ClientSettings>
    <MasterTableView AllowFilteringByColumn="False" AllowNaturalSort="False" ClientDataKeyNames="YouthId" DataKeyNames="YouthId" EnableColumnsViewState="False" EnableViewState="False" HierarchyLoadMode="Client" NoMasterRecordsText="<div class='noRec'>No records to display.</div>" TableLayout="Auto">
        <Columns>
            <telerik:GridBoundColumn DataField="YouthId" HeaderText="Youth ID" UniqueName="YouthId">
                <HeaderStyle CssClass="gridHeader" Width="10%" />
                <ItemStyle CssClass="gridItem" Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
                <HeaderStyle CssClass="gridHeader" Width="25%" />
                <ItemStyle CssClass="gridItem" Width="25%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Gender" HeaderText="Gender" UniqueName="Gender">
                <HeaderStyle CssClass="gridHeader" Width="10%" />
                <ItemStyle CssClass="gridItem" Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Age" HeaderText="Age" UniqueName="Age">
                <HeaderStyle CssClass="gridHeader" Width="10%" />
                <ItemStyle CssClass="gridItem" Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" UniqueName="Phone">
                <HeaderStyle CssClass="gridHeader" Width="10%" />
                <ItemStyle CssClass="gridItem" Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ZipCode" HeaderText="Zip Code" UniqueName="ZipCode">
                <HeaderStyle CssClass="gridHeader" Width="10%" />
                <ItemStyle CssClass="gridItem" Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="Status">
                <HeaderStyle CssClass="gridHeader" Width="10%" />
                <ItemStyle CssClass="gridItem" Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="Temp">
                <HeaderStyle CssClass="gridHeader" Width="15%" />
                <ItemStyle HorizontalAlign="Center" Width="15%" />
            </telerik:GridTemplateColumn>
        </Columns>
        <NestedViewTemplate>
            <div class="viewWrap">
                <telerik:RadTabStrip EnableViewState="False" ID="tbGrd" MultiPageID="multiPage" runat="server" SelectedIndex="0">
                    <Tabs>
                        <telerik:RadTab Owner="tbGrd" PageViewID="pBasic" runat="server" Selected="True" Text="Identification" Value="identification">
                        </telerik:RadTab>
                        <telerik:RadTab Owner="tbGrd" PageViewID="pOthers" runat="server" Text="Contact" Value="contact">
                        </telerik:RadTab>
                        <telerik:RadTab Owner="tbGrd" PageViewID="pSkills" runat="server" Text="Referral" Value="referral">
                        </telerik:RadTab>
                        <telerik:RadTab Owner="tbGrd" PageViewID="pNotes" runat="server" Text="Options" Value="options">
                        </telerik:RadTab>
                        <telerik:RadTab Owner="tbGrd" PageViewID="pAct" runat="server" Text="Calls" Value="calls">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage CssClass="pageView" EnableViewState="False" ID="multiPage" runat="server" SelectedIndex="0">
                    <telerik:RadPageView ID="pageIdentification" runat="server">
                        <div id="dBas" runat="server">
                            This is the first tab
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="pageContact" runat="server">
                        <div id="dOth" runat="server">
                            this is the second tab
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="pageReferral" runat="server">
                        <div id="dSkl" runat="server">
                            this is the third tab
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="pageOptions" runat="server">
                        <div id="dNot" runat="server">
                            this si the fourth tab
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="pageCalls" runat="server">
                        <div id="dSub" runat="server">
                            this is the fifth tab
                        </div>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </div>
        </NestedViewTemplate>
    </MasterTableView>
</telerik:RadGrid>

 

    <script>
        $(document).ready(function()
        {
            var GridNewCases = $find(arrayControl[0]);
            var GridNewCasesMaster = GridNewCases.get_masterTableView();
//Data is fetched here
            //setTimeout(GetNewCasesData, 100);

//Though this is new function this is how the datasource is setup:
    GridNewCasesMaster.set_dataSource((result && result.Data) ? result.Data : []);
    GridNewCasesMaster.dataBind();


        });
       </script>

 

This is the datasource that is retrieved.

{"d":{"Data":[{"Id":2,"YouthId":"CR0000002","Name":"Mani Venkiteswaran","Gender":"Others/Unknown","Age":20,"Phone":"[phone]","ZipCode":"18940-","Status":"New"},{"Id":5,"YouthId":"CR0000005","Name":"Venrall Jamanison","Gender":"Male","Age":8,"Phone":"[phone]","ZipCode":"18940-","Status":"New"},{"Id":6,"YouthId":"CR0000006","Name":"Jermey Smith","Gender":"Male","Age":15,"Phone":"[phone]","ZipCode":"18940-","Status":"New"},{"Id":7,"YouthId":"CR0000007","Name":"Walter Nelson","Gender":"Male","Age":16,"Phone":"[phone]","ZipCode":"18942-","Status":"New"}]}}

 

At the code behind this is the code:

protected void Page_Load(object sender, EventArgs e)
{
    if (Page.IsPostBack)
    {
        return;
    }

   gridManageCases.DataSource = new List<object>();
    gridManageCases.AutoGenerateHierarchy = true;
}

 

 

 

Please let me know how this can be done. I found one code sample on your site from 2008, though the steps are same what I am doing but then I should be knowing much changes have happened since the assembly was released back in 2008 to now.

Thanks.

[Mani]

Found a way out. Thanks for the help.