Populate Generic Grid at Run Time Using Kendo UI and Jqeury

In this blog you will learn how to 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>