Problem When Binding Hierarchical JSON Data To Grid

[John]

Hi everybody

Currently, we have a problem when trying to bind hierarchical JSON data to the Telerik MVC Grid. A hierarchical JSON object has some default properties, and a property that contains a list of JSON objects, e.g. {"Name", "Test", "Addresses": [{"Street", "Street #2"},{"Street", "Street #3"}]}

The following is a detailed description of our problematic scenario, in which we try to bind hierarchical JSON data to our Telerik MVC Grid.

We have the following Model class: 

public class Customer
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public List<Address> Address { get; set; }
}

We also have an Action in one of our Controller that returns the JSON representation of this object, containing the attached collection of Addresses:

[GridAction]
public JsonResult BindCustomer(List<int> ids)
{
    //...some unimportant code...

    //items is of type List<Customer>, and contains Customers with Addresses (List<Address>)
    return Json(new GridModel(items), "application/json", JsonRequestBehavior.AllowGet);

}

Once the Controller Action is called, the returned JSON representation of a Customer object looks like the following:

{"Id":1,"FirstName":"John Doeson","Address":[{"Id":1,"Street":"Piazza Nosetto","City":"Bellinzona","Zip":null,"Country":null,"Type":null,"Relation":{"State":null,"ValidFrom":"\/Date(1297155452936)\/","ValidTo":"\/Date(1297328252936)\/","Responsible":"TS","Campaign":null,"Adm":null,"LogisticsUnitId":1,"IsBlocked":false}}]}

We now want to bind this data (a JSON list of such objects) to our Telerik MVC Grid (Razor is used as the view engine). Binding the top members of the Customer object, like the Id and FirstName works fine, but as soon as we want to bind any properties appertaining to the Address list, nothing will be shown. 

The following code shows the binding of the data:

@(Html.Telerik().Grid<Customer>(Model)
        .Name("CustomerGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Id)
                .ClientTemplate("<input type='hidden' id='unique-row-id' value='<#= Id #>' /><input type='checkbox' id='select-multiple-rows' value='<#= Id #>'/>")
                .Title("Select")
                .Width(10)
                .HtmlAttributes(new { style = "text-align: center" });
            columns.Bound(c => c.CustomerNumber).Width(130);
            columns.Bound(c => c.CompanyName).Width(130);
            columns.Bound(c => c.Address.Count).Width(130);
        })
        //...some more unimportant code...
)

The last bound column is the length of the Address collection (just a simple example). Once the grid is rendered, that column remains empty, meaning that no value is displayed within the cell. We also have tried to use the following Bound invocation with no success:

columns.Bound(c => c.Address.FirstOrDefault().Street).Width(130);

Also, no exception is thrown when accessing the Address collection, and the Address collection always contains some entries.

My question now is: Does the Telerik MVC Grid support hierarchical JSON data (as shown above)? Or are we missing something, like a proper way to bind such hierarchical JSON data to a Telerik MVC Grid? 

I'm looking forward to a reply of yours, and hope we are able to find a proper solution to this problem.

Many thanks.

Regards,
John

[k]

I am also having the same problem. In the Telerik MVC Grid, I want to bind one column to collection and each item in the collection has some properties and want to bind the column to one property.
Class Customer
{
    string Name;
    List<Address> AddressList;
}

Class Address
{
      string Street1;
}

Now in my grid Address column, I want to display street1 information. How to do this using Client templates?

Thanks in advance

[Hiren]

How to bind JSON LIST to telerik grid control using ASP.NET MVC Razor sample.

---------
List<Dictionary<string, string>> myList = new List<Dictionary<string, string>>();
myList = Json.Decode<List<Dictionary<string, string>>>(view);
---------
<script type="text/javascript">
function BindGridView() {
$.ajax({
type: "POST",
url: "/Test/GetCustomersJSON",
data: "{}",
contentType: "application/json",
dataType: "json",
success: function (data) {

var obj = $.parseJSON(data);
$("#divTest").append("<Ul>");
jQuery.each(obj, function () {
$("#divTest").append("<li>" + this.Id + ", " + this.CustomerName + ", " + this.Address + "</li>");
});
$("#divTest").append("</Ul>");
}
});
}
</script>
----------------

<body onload="BindGridView();">
<div id="divAllergies">
</div>
</body>
-----------------

the above code works fine and its displaying the list in div but i want to bind the same list to JGrid / TelerikGrid /WebGrid?

--Giri
http://giribabu.wordpress.com