Client-bind hierarchial RadGrid

[Sophie]

Hello!

I am trying to bind a hierarchial using a web service. I've read that this is not natively supported by the RadGrid, but I'm hoping it's still possible to do it. I have previously bound the grid server-side to a hierarchial source and that worked fine.

Attached is my project in its current state. I am able to get the first level of data bound in the grid, but the second level is however lost. I am guessing this has something to do with the OnDetailTabelDataBind server-side event which I used to attach the detail data to the parent data, but it is no longer firing because I am using client-side binding.

Can anyone help me out here? I am guessing I will have to manually assign each detail row to the corresponding detail data that's available in the grid's source, but I am not sure. I'm thinking, since I have all the data available (I fetch all data once - I don't want to ask the server for the details data once the row is expanded), would it be possible to do something in the OnRowDataBound client event? Maybe iterate through all detail items and manually bind them to detail rows?

Below is my code. If anyone's able to have a look I'd be grateful.

Thanks in advance.

<telerik:RadGrid runat="server" AutoGenerateColumns="false"
           ID="RadGrid1" OnDetailTableDataBind="RadGrid1_DetailTableDataBind"
           Skin="Default">
           <ClientSettings>
               <DataBinding Location="WebService.asmx"
                   SelectMethod="TestGetData" ShowEmptyRowsOnLoad="false" />
           </ClientSettings>
           <MasterTableView DataKeyNames="" HierarchyLoadMode="Client">
               <Columns>
                   <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name"></telerik:GridBoundColumn>
                   <telerik:GridBoundColumn UniqueName="ArticleNumber" DataField="ArticleNumber" HeaderText="Article Number"></telerik:GridBoundColumn>
                   <telerik:GridBoundColumn UniqueName="SerialNumber" DataField="SerialNumber" HeaderText="Serial Number"></telerik:GridBoundColumn>
               </Columns>
               <DetailTables>
                   <telerik:GridTableView Name="Details" runat="server" AutoGenerateColumns="false">
                       <Columns>
                           <telerik:GridBoundColumn UniqueName="Name" DataField="MockData.Name" HeaderText="Name"></telerik:GridBoundColumn>
                           <telerik:GridBoundColumn UniqueName="OS" DataField="MockData.OS" HeaderText="Operating System"></telerik:GridBoundColumn>
                       </Columns>
                   </telerik:GridTableView>
               </DetailTables>
           </MasterTableView>
       </telerik:RadGrid>

My web service:

[WebMethod(true)]

public List<MockData> TestGetData()

{

    return GetInventoryData(new Random(DateTime.Now.Second));

}

 

private List<MockData> GetInventoryData(Random random)

{

 

    var list = new List<MockData>();

 

    for (int i = 0; i < 10; i++)

    {

        var mock = new MockData();

        mock.Name = "VC";

        mock.OS = "Ldd";

        mock.ArticleNumber = "123456";

        mock.SerialNumber = "654321";

        mock.Revision = "J";

        mock.ID = i;

        mock.parentID = null;

 

        var details = new List<DetailedMockData>();

 

        for (int j = 0; j < random.Next(0, 4); j++)

        {

            var mock2 = new DetailedMockData();

            mock2.MockData = new MockData();

            mock2.Test = "Hej Hej";

            mock2.MockData.Name = "dfd";

            mock2.MockData.OS = "Lff";

            mock2.MockData.ID = j + 100;

            mock2.MockData.parentID = mock.ID;

            details.Add(mock2);

        }

 

        mock.Details = details;

 

        list.Add(mock);

    }

 

    return list;

}

[Serializable]

public class MockData

{

    public string Name { get; set; }

    public string OS { get; set; }

    public string ArticleNumber { get; set; }

    public string SerialNumber { get; set; }

    public string Hardware { get; set; }

    public string Software { get; set; }

    public string Revision { get; set; }

    public int ID { get; set; }

    public int? parentID { get; set; }

 

    public List<DetailedMockData> Details { get; set; }

}

 

[Serializable]

public class DetailedMockData

{

    public string Test { get; set; }

 

    public MockData MockData { get; set; }

}

[Jayesh Goyani]

Hello,

Please try with below code snippet.

function RowDataBound(sender, eventArgs) {
              if (eventArgs.get_item().get_owner().get_name() == "Details") {
                  eventArgs.get_item().get_cell("OS").innerHTML = eventArgs.get_dataItem().MockData.OS;
              }
          }

          function HierarchyExpanding(sender, eventArgs) {

              var source = eventArgs._tableView._dataItems[eventArgs.get_itemIndexHierarchical()]._dataItem.Details;
              if (source != null) {

                  sender._detailTables[eventArgs.get_itemIndexHierarchical()].set_dataSource(source);
                  sender._detailTables[eventArgs.get_itemIndexHierarchical()].dataBind();

              }
          }

<telerik:RadGrid runat="server" AutoGenerateColumns="false" ID="RadGrid2">
           <ClientSettings>
               <DataBinding Location="WebService.asmx" SelectMethod="TestGetData" />
               <ClientEvents OnHierarchyExpanding="HierarchyExpanding" OnRowDataBound="RowDataBound" />
           </ClientSettings>
           <MasterTableView ClientDataKeyNames="ID" HierarchyLoadMode="Client" Name="Parent">
               <Columns>
                   <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn UniqueName="ArticleNumber" DataField="ArticleNumber" HeaderText="Article Number">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn UniqueName="SerialNumber" DataField="SerialNumber" HeaderText="Serial Number">
                   </telerik:GridBoundColumn>
               </Columns>
               <DetailTables>
                   <telerik:GridTableView Name="Details" runat="server" AutoGenerateColumns="false">
                       <Columns>
                           <telerik:GridBoundColumn UniqueName="Test" DataField="Test" HeaderText="Test">
                           </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn UniqueName="OS" DataField="MockData.OS" HeaderText="Operating System">
                           </telerik:GridBoundColumn>
                       </Columns>
                   </telerik:GridTableView>
               </DetailTables>
           </MasterTableView>
       </telerik:RadGrid>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public WebService()
    {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod(true)]
    public List<MockData> TestGetData()
    {
        return GetInventoryData(new Random(DateTime.Now.Second));
    }

    private List<MockData> GetInventoryData(Random random)
    {

        var list = new List<MockData>();

        for (int i = 0; i < 10; i++)
        {
            var mock = new MockData();
            mock.Name = "VC";
            mock.OS = "Ldd";
            mock.ArticleNumber = "123456";
            mock.SerialNumber = "654321";
            mock.Revision = "J";
            mock.ID = i;
            mock.parentID = null;

            var details = new List<DetailedMockData>();

            for (int j = 0; j < random.Next(0, 4); j++)
            {
                var mock2 = new DetailedMockData();
                mock2.MockData = new MockData();
                mock2.Test = "Hej Hej";
                mock2.MockData.Name = "dfd";
                mock2.MockData.OS = "Lff";
                mock2.MockData.ID = j + 100;
                mock2.MockData.parentID = mock.ID;
                details.Add(mock2);
            }

            mock.Details = details;

            list.Add(mock);
        }

        return list;
    }

}

[Serializable]
public class MockData
{
    public string Name { get; set; }
    public string OS { get; set; }
    public string ArticleNumber { get; set; }
    public string SerialNumber { get; set; }
    public string Hardware { get; set; }
    public string Software { get; set; }
    public string Revision { get; set; }
    public int ID { get; set; }
    public int? parentID { get; set; }

    public List<DetailedMockData> Details { get; set; }
}

[Serializable]
public class DetailedMockData
{
    public string Test { get; set; }

    public MockData MockData { get; set; }
}

Thanks,
Jayesh Goyani

[Shinu]

Hi,

With reference to this forum thread, Client-side databinding with hierarchy is not a supported scenario.

Thanks,
Shinu.