Populate Generic Grid at Run Time Using Kendo UI and Jqeury

For doing these, we first create the model class as below:

After it, we create action method in controller which return the specified data which will bind to the grid:

Now below is the code for view:

@model TelerikMvcRndProject.Models.DisplayViewEntity
@{
ViewBag.Title = "GenericGrid";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Generic Grid</h2>
<div id="grid"></div>
<script>
$(document).ready(function () {
fnCreate_Grid(JSON.parse('@Html.Raw(Json.Encode(Model.FindData))'));
});
function fnCreate_Grid(gridData) {
debugger;
var a = JSON.parse('@Html.Raw(Json.Encode(Model.DisplayArg))');
var DispFieldName = a.DisplayFieldText.split(",");
var DispCaption = a.DisplayFieldName.split(",");
var FieldWidth = a.DisplayFieldWidth.split(",");
var columns = [];
$.each(DispCaption, function (i) {
columns.push({ field: DispFieldName[i], title: DispCaption[i], width: FieldWidth[i] + "%" });
});
var colData = JSON.stringify(columns);
$('#grid').kendoGrid({
dataSource: {
type: 'json',
data: gridData,
pageSize: 7
},
selectable: "single",
serverPaging: true,
height: 300,
pageSize: 10,
pageable: {
refresh: false,
pageSizes: false,
buttonCount: 10
},
columns: columns,
});
}
</script>