Create Grids with Dynamic Columns and Data Types
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | Windows 10 64bit |
| Preferred Language | JavaScript |
Description
In some cases, the server returns a response with different fields and values depending on user input or another external variable. Thus, the developer doesn't know what columns and fields will be available in the Grid, nor what the type of these fields will be.
This article showcases how to dynamically generate the Kendo UI Grid by using the response data and without knowing the names and types of the columns and fields.
Solution
- Prefetch the dynamic Grid data by making an
ajaxrequest to the server. - Create the
dataSource.modelby using the first record in the response as a sample. - Create the Grid
columnsby using the names of the fields returned in the server response. - Generate the Grid by using the model and columns that were created in the previous two steps.
<div id="grid" style="width:1000px;"></div>
<script>
var isDateField =[];
$.ajax({
url: "https://run.mocky.io/v3/fe25d379-099c-4e04-b26b-5f0453e43ef4",
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>