Kendo Grid Json标题和内容数据

Question

我正在研究Asp。NetMVC5项目中，我需要使用KendoGridJquery来更改表。

目前，我正在从一个Api控制器返回数据，看起来像这样：

[
headers:{{
"label": "Name",
"id": "name",
"isfixed": true,
"width": "200px"
},
{
"width": "200px",
"isfixed": false,
"id": "city",
"label": "City"
},
},
rows:{
{name:"Joe",city:"Berlin"},
{name:"Doe",city:"London"},
...
}
]

剑道似乎不喜欢这种形式。只有当我像这样发送JSON时它才能工作：

[
{ name: "Joe", City: "Berlin" },
{ name: "Doe", City: "Londo" }
]

问题：我可以让Kendo网格使用第一种类型的数据吗？因为我需要不同表的动态列和数据？

Answer 1

这里详细介绍了如何实现这一点：https://docs.telerik.com/kendo-ui/knowledge-base/create-with-dynamic-columns-and-data-types

实现它的代码：

<div id="grid" style="width:1000px;"></div>
<script>
var isDateField =[];
$.ajax({
url: "https://www.mocky.io/v2/5835e736110000020e0c003c",
dataType: "jsonp",
success: function(result) {
generateGrid(result);
}
});
function generateGrid(response) {
var model = generateModel(response);
var columns = generateColumns(response);
var grid = $("#grid").kendoGrid({
dataSource: {
transport:{
read:  function(options){
options.success(response.data);
}
},
pageSize: 5,
schema: {
model: model
}
},
columns: columns,
pageable: true,
editable:true
});
}
function generateColumns(response){
var columnNames = response["columns"];
return columnNames.map(function(name){
return { field: name, format: (isDateField[name] ? "{0:D}" : "") };
})
}
function generateModel(response) {
var sampleDataItem = response["data"][0];
var model = {};
var fields = {};
for (var property in sampleDataItem) {
if(property.indexOf("ID") !== -1){
model["id"] = property;
}
var propType = typeof sampleDataItem[property];
if (propType === "number" ) {
fields[property] = {
type: "number",
validation: {
required: true
}
};
if(model.id === property){
fields[property].editable = false;
fields[property].validation.required = false;
}
} else if (propType === "boolean") {
fields[property] = {
type: "boolean"
};
} else if (propType === "string") {
var parsedDate = kendo.parseDate(sampleDataItem[property]);
if (parsedDate) {
fields[property] = {
type: "date",
validation: {
required: true
}
};
isDateField[property] = true;
} else {
fields[property] = {
validation: {
required: true
}
};
}
} else {
fields[property] = {
validation: {
required: true
}
};
}
}
model.fields = fields;
return model;
}
</script>