Reputation:
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
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