Binding Kendo grid to a Complex dataSource

Question

I have a div which I am converting to a Kendo Grid in Jquery.

 divSearchGrid.kendoGrid({
    dataSource: {
        transport: {
            read: function (options) {
                var webMethod = "Portal.aspx/DisplayNotes";
                $.ajax({
                    type: "POST",
                    url: urlSearch,
                    data: paramsSearch,
                    async: false,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        options.success(result.d);
                    }
                })
            }
        }
    },
    batch: true,
    selectable: "row",
    autoSync: true,
    editable: true,// "inline",
    navigatable: true,
    columnMenu: true
})

It's Datasource is a List whose objects has another List as their properties.

Example Datasource : [{a,b,c,List,g,h,i,},{a,b,c,List,g,h,i,},{a,b,c,List,g,h,i,}]

and the List in above objects has following structure

List : [{d},{e},{f}]

I want to show my kendo grid with following columns:

a,b,c,d,e,f,g,h,i

How can I achieve this functionality.

Answer 1

If you just need to show the contents, you can simply bind multiple columns to the List object, and use the template property to display each one.

{ field: 'List', template: '#=List[0].value#' }

or similar. Of course it relies on List having the same number of properties for each main list Item (ie always {d},{e},{f}).

If you need to edit these fields, you will need to employ a custom editor for each {d},{e},{f} field

Here is a small sample using a list with a nested list. (Second grid is just for testing actual values are changing). Not exactly sure how your data is structured, or what your data types are, but hopefully this will help.

http://jsbin.com/AWogIpO/1/edit