Referenc:
http://www.telerik.com/forums/binding-kendoui-grid-to-dynamic-column-and-values-kendo-ui-complete-resources-buy-try
1.html page
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.flat.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>Grid autogenerate columns with CRUD</title>
</head>
<body>
<div id="grid" style="width:600px;"></div>
</body>
</html>
2.Js file
var data = [{
"Name": "daya",
"Role": "Developer",
"Dept": "Dev",
"Dept1": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}, {
"Name": "siva",
"Role": "Developer",
"Dept": "Dev",
"Dept1": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}, {
"Name": "sivadaya",
"Role": "Developer",
"Dept": "Dev",
"Dept1": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}, {
"Name": "dayasiva",
"Role": "Developer",
"Dept": "Dev",
"Dept1": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}];
//in the success handler of the ajax method call the function below with the received data:
var dateFields = [];
generateGrid(data)
function generateGrid(gridData) {
var model = generateModel(gridData[0]);
var parseFunction;
if (dateFields.length > 0) {
parseFunction = function (response) {
for (var i = 0; i < response.length; i++) {
for (var fieldIndex = 0; fieldIndex < dateFields.length; fieldIndex++) {
var record = response[i];
record[dateFields[fieldIndex]] = kendo.parseDate(record[dateFields[fieldIndex]]);
}
}
return response;
};
}
var grid = $("#grid").kendoGrid({
dataSource: {
data: gridData,
schema: {
model: model,
parse: parseFunction
}
},
editable: true,
sortable: true
});
}
function generateModel(gridData) {
var model = {};
model.id = "ID";
var fields = {};
for (var property in gridData) {
var propType = typeof gridData[property];
if (propType == "number") {
fields[property] = {
type: "number",
validation: {
required: true
}
};
} else if (propType == "boolean") {
fields[property] = {
type: "boolean",
validation: {
required: true
}
};
} else if (propType == "string") {
var parsedDate = kendo.parseDate(gridData[property]);
if (parsedDate) {
fields[property] = {
type: "date",
validation: {
required: true
}
};
dateFields.push(property);
} else {
fields[property] = {
validation: {
required: true
}
};
}
} else {
fields[property] = {
validation: {
required: true
}
};
}
}
model.fields = fields;
return model;
}