Populate Kendo Grid using jQuery

In this blog you will learn how to populate a Kendo Grid using jQuery.

Using the Telerik Kendo UI, we can populate a grid using jQeury. For this, we must first create an Employee Model class as below: 

public class EmployeeInfo
{
    [DisplayName("Employee Name")]
    public string EmployeeName { get; set; }
    [DisplayName("Present City")]
    public string City { get; set; }
    [DisplayName("Current State")]
    public string State { get; set; }
    [DisplayName("Phone Number")]
    public string PhoneNo { get; set; }
}

To populate data, we provide the following method:

 

public List<EmployeeInfo> EmployeeData()
{
    List<EmployeeInfo> lstEmp = new List<EmployeeInfo>();
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma", City = "Kolkata", State = "West Bengal", PhoneNo = "03320203030" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma1", City = "Kolkata1", State = "West Bengal1", PhoneNo = "03320203031" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma2", City = "Kolkata2", State = "West Bengal2", PhoneNo = "03320203032" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma3", City = "Kolkata3", State = "West Bengal3", PhoneNo = "03320203033" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma4", City = "Kolkata4", State = "West Bengal4", PhoneNo = "03320203034" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma5", City = "Kolkata5", State = "West Bengal5", PhoneNo = "03320203035" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma6", City = "Kolkata6", State = "West Bengal6", PhoneNo = "03320203036" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma7", City = "Kolkata7", State = "West Bengal7", PhoneNo = "03320203037" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma8", City = "Kolkata8", State = "West Bengal8", PhoneNo = "03320203038" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma9", City = "Kolkata9", State = "West Bengal9", PhoneNo = "03320203039" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma10", City = "Kolkata10", State = "West Bengal10", PhoneNo = "033202030310" });
    lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma11", City = "Kolkata11", State = "West Bengal11", PhoneNo = "033202030311" });
    return lstEmp;
}

Then provide the cotroller method to return the view with the model:

public ActionResult GridWithScript()
{
      List<EmployeeInfo> lstEmp = EmployeeData();
      return View(lstEmp);
}

Then provide the following code for the view:

@model List<TelerikMvcRndProject.Models.EmployeeInfo>
@{
    ViewBag.Title = "GridWithScript";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Grid With Script</h2>
<div id="grid"></div>
<script>
    $(document).ready(function () {
        var model =@{@Html.Raw(Json.Encode(Model))};
        $('#grid').kendoGrid({
            dataSource: {
                data : model,
                pageSize :7
            },
            selectable : "single",
            schema: {
                model: {
                    fields: {
                        EmployeeName: { type: "string" },
                        City: { type: "string" },
                        State: { type: "string" },
                        PhoneNo: { type: "string" },
                    }
                }
            },
            sortable : {
                mode :"single",
                allowUnsort : "false"
            },
            serverPaging: true,
            height: 300,
            pageSize:10,
            pageable : {
                refresh : false,
                pageSizes : true,
                buttonCount:10
            },
            columns: [
                { field: "EmployeeName", title: "Employee Name", width: "25%" },
                { field: "City", title: "City", width: "150px" },
                { field: "State", title: "State", width: "150px" },
                { field: "PhoneNo", title: "Phone No", width: "150px" }
            ]
        });
        $("#grid").data("kendoGrid").bind("change", onRowSelection);
        var grid=$("#grid");

        $('#grid').data('kendoGrid').dataSource.bind('change',function(e){
            fnGridSort(e);
        });
    });

    function onRowSelection() {
        var a = this.dataItem(this.select());
        alert(a.EmployeeName);
        alert(a.City);
        alert(a.State);
        alert(a.PhoneNo);
    }

    function fnGridSort(e) {
        var gridHeader = $('#grid').data('kendoGrid').dataSource.sort();
        var columns = gridHeader[0];
        var sortOrder = columns.dir;
        var sortField=columns.field;
        alert(sortOrder + ' ' + sortField);
    }
</script>

Also, on the click of a grid row, the data will be shown in an alert.