user3040830
user3040830

Reputation:

Binding Kendo grid to a Complex dataSource

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.

Upvotes: 2

Views: 4633

Answers (1)

Robin Giltner
Robin Giltner

Reputation: 3055

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 (i.e. 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

Upvotes: 4

Related Questions