This is a migrated thread and some comments may be shown as answers.

How to bind to Json Child Property ?

1 Answer 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bernd Wessels
Top achievements
Rank 1
Bernd Wessels asked on 14 Sep 2010, 05:39 AM
Hi
I have a Client-side binding like in the Telerik Samples to a WebService which returns something like

{"d":[
{"__type":"Customer",   "CustomerID":40,  "Name":"Paul"     ,"Phone":92163   ,"Child":{ "Name":"Ging"    ,"ChildID":100 }     },
{"__type":"Customer",   "CustomerID":41,  "Name":"Peter"    ,"Phone":91981   ,"Child":{ "Name":"Gong"   ,"ChildID":101 }     },
{"__type":"Customer",   "CustomerID":42,  "Name":"Phil"       ,"Phone":92139   ,"Child":{ "Name":"Ping"     ,"ChildID":102 }     },
{"__type":"Customer",   "CustomerID":43,  "Name":"Phong"   ,"Phone":92137   ,"Child":{ "Name":"Pong"    ,"ChildID":103 }     }
]}

Now I can bind the MasterTable like

radGrid.MasterTableView.Columns.Add(boundColumn);
boundColumn.DataField = "CustomerID";
boundColumn.HeaderText = "CustomerID";

radGrid.MasterTableView.Columns.Add(boundColumn);
boundColumn.DataField = "Name";
boundColumn.HeaderText = "Name";

radGrid.MasterTableView.Columns.Add(boundColumn);
boundColumn.DataField = "Phone";
boundColumn.HeaderText = "Phone";

radGrid.MasterTableView.Columns.Add(boundColumn);
boundColumn.DataField = "Child";
boundColumn.HeaderText = "Child";

But here is the problem, this shows

[object Object]

in the Child column.

But I want to bind the column to Child.Name

I tried

radGrid.MasterTableView.Columns.Add(boundColumn);
boundColumn.DataField = "Child.Name";
boundColumn.HeaderText = "Child.Name";

That doesnt work.

How to do that ?

Cheers

Bernd

1 Answer, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 16 Sep 2010, 12:46 PM
Hi Bernd,

You cannot directly bind nested properties (or child properties) to grid column with client-side databinding. You need to programmatically set the innerHTML of your table cells with values from child properties:

function gridRowDataBound(sender, args)
{
    var product = args.get_dataItem();
    var item = args.get_item();
    var childCell = item.get_cell("Child");
 
    childCell.innerHTML = product.Child.Name;
}

For the above code to work, your columns should have unique names you know and can access them by. The easiest is to have the unique names the same as the data field names. Here is a sample test page you can run locally:

<%@ Page Language="C#" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var data = eval({ "d": [
            { "__type": "Customer", "CustomerID": 40, "Name": "Paul", "Phone": 92163, "Child": { "Name": "Ging", "ChildID": 100} },
            { "__type": "Customer", "CustomerID": 41, "Name": "Peter", "Phone": 91981, "Child": { "Name": "Gong", "ChildID": 101} },
            { "__type": "Customer", "CustomerID": 42, "Name": "Phil", "Phone": 92139, "Child": { "Name": "Ping", "ChildID": 102} },
            { "__type": "Customer", "CustomerID": 43, "Name": "Phong", "Phone": 92137, "Child": { "Name": "Pong", "ChildID": 103} }
            ]
        });
 
        function gridCreated(sender, args)
        {
            window.gridId = sender.get_id();
        }
 
        function pageLoad(sender, args)
        {
            if (window.gridId)
            {
                var grid = $find(window.gridId);
                var master = grid.get_masterTableView();
                master.set_dataSource(data.d);
                master.dataBind();
            }
        }
 
        function gridCommand(sender, args)
        {
 
        }
 
        function gridRowDataBound(sender, args)
        {
            var product = args.get_dataItem();
            var item = args.get_item();
            var childCell = item.get_cell("Child");
 
            childCell.innerHTML = product.Child.Name;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadGrid ID="RadGrid1" runat="server" Width="800px">
            <MasterTableView DataKeyNames="CustomerID" ClientDataKeyNames="CustomerID">
                <Columns>
                    <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" UniqueName="CustomerID" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" />
                    <telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" UniqueName="Phone" />
                    <telerik:GridBoundColumn DataField="Child" HeaderText="Child" UniqueName="Child" />
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnGridCreated="gridCreated" OnCommand="gridCommand" OnRowDataBound="gridRowDataBound" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

Veli
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Bernd Wessels
Top achievements
Rank 1
Answers by
Veli
Telerik team
Share this question
or