Create Grids with Dynamic Columns and Data Types
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 ajax request to the server.
Create the dataSource.model by using the first record in the response as a sample.
Create the Grid columns by 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/073ca8a1-6fe6-44f5-a33d-182a7788d3a4",
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>
