Populate Generic Grid at Run Time Using Kendo UI and Jqeury

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

public class DisplayViewEntity
{
    public List<Dictionary<string, string>> DisplayData { get; set; }
    public int TotalRecord { get; set; }
    public DisplayCommand DisplayArg { get; set; }
}

public class DisplayCommand
{
    public string DisplayFieldText { get; set; }
    public string DisplayFieldName { get; set; }
    public string DisplayFieldWidth { get; set; }
}

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

public ActionResult GenericGrid()
{
    List<Dictionary<string, string>> asd = new List<Dictionary<string, string>>();
    Dictionary<string, string> a = new Dictionary<string, string>();
    for (int i = 1; i <= 10; i++)
    {
        a = new Dictionary<string, string>();
        a.Add("A", "A" + i.ToString());
        a.Add("B", "B" + i.ToString());
        a.Add("C", "C" + i.ToString());
        a.Add("D", "D" + i.ToString());
        a.Add("E", "E" + i.ToString());
        asd.Add(a);
    }

    DisplayCommand fc = new DisplayCommand();
    fc.DisplayFieldName = "First Name,2nd Name,Third Name,Last Col";
    fc.DisplayFieldText = "A,B,C,D";
    fc.DisplayFieldWidth = "50,20,0,50";

    DisplayViewEntity fve = new DisplayViewEntity();
    fve.DisplayData = asd;
    fve.DisplayArg = fc;
    return View(fve);
}

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>