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

  1. public class EmployeeInfo      
  2. {      
  3.     [DisplayName("Employee Name")]      
  4.     public string EmployeeName { get; set; }      
  5.     [DisplayName("Present City")]      
  6.     public string City { get; set; }      
  7.     [DisplayName("Current State")]      
  8.     public string State { get; set; }      
  9.     [DisplayName("Phone Number")]      
  10.     public string PhoneNo { get; set; }      
  11. }   
To populate data, we provide the following method:

 

  1. public List<EmployeeInfo> EmployeeData()    
  2. {    
  3.     List<EmployeeInfo> lstEmp = new List<EmployeeInfo>();    
  4.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma", City = "Kolkata", State = "West Bengal", PhoneNo = "03320203030" });    
  5.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma1", City = "Kolkata1", State = "West Bengal1", PhoneNo = "03320203031" });    
  6.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma2", City = "Kolkata2", State = "West Bengal2", PhoneNo = "03320203032" });    
  7.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma3", City = "Kolkata3", State = "West Bengal3", PhoneNo = "03320203033" });    
  8.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma4", City = "Kolkata4", State = "West Bengal4", PhoneNo = "03320203034" });    
  9.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma5", City = "Kolkata5", State = "West Bengal5", PhoneNo = "03320203035" });    
  10.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma6", City = "Kolkata6", State = "West Bengal6", PhoneNo = "03320203036" });    
  11.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma7", City = "Kolkata7", State = "West Bengal7", PhoneNo = "03320203037" });    
  12.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma8", City = "Kolkata8", State = "West Bengal8", PhoneNo = "03320203038" });    
  13.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma9", City = "Kolkata9", State = "West Bengal9", PhoneNo = "03320203039" });    
  14.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma10", City = "Kolkata10", State = "West Bengal10", PhoneNo = "033202030310" });    
  15.     lstEmp.Add(new EmployeeInfo { EmployeeName = "Ashok Sharma11", City = "Kolkata11", State = "West Bengal11", PhoneNo = "033202030311" });    
  16.     return lstEmp;    
  17. }   
Then provide the cotroller method to return the view with the model:
  1. public ActionResult GridWithScript()    
  2. {    
  3.       List<EmployeeInfo> lstEmp = EmployeeData();    
  4.       return View(lstEmp);    
  5. }    
Then provide the following code for the view:
  1. @model List<TelerikMvcRndProject.Models.EmployeeInfo>    
  2. @{    
  3.     ViewBag.Title = "GridWithScript";    
  4.     Layout = "~/Views/Shared/_Layout.cshtml";    
  5. }    
  6.     
  7. <h2>Grid With Script</h2>    
  8. <div id="grid"></div>    
  9. <script>    
  10.     $(document).ready(function () {    
  11.         var model =@{@Html.Raw(Json.Encode(Model))};    
  12.         $('#grid').kendoGrid({    
  13.             dataSource: {    
  14.                 data : model,    
  15.                 pageSize :7    
  16.             },    
  17.             selectable : "single",    
  18.             schema: {    
  19.                 model: {    
  20.                     fields: {    
  21.                         EmployeeName: { type: "string" },    
  22.                         City: { type: "string" },    
  23.                         State: { type: "string" },    
  24.                         PhoneNo: { type: "string" },    
  25.                     }    
  26.                 }    
  27.             },    
  28.             sortable : {    
  29.                 mode :"single",    
  30.                 allowUnsort : "false"    
  31.             },    
  32.             serverPaging: true,    
  33.             height: 300,    
  34.             pageSize:10,    
  35.             pageable : {    
  36.                 refresh : false,    
  37.                 pageSizes : true,    
  38.                 buttonCount:10    
  39.             },    
  40.             columns: [    
  41.                 { field: "EmployeeName", title: "Employee Name", width: "25%" },    
  42.                 { field: "City", title: "City", width: "150px" },    
  43.                 { field: "State", title: "State", width: "150px" },    
  44.                 { field: "PhoneNo", title: "Phone No", width: "150px" }    
  45.             ]    
  46.         });    
  47.         $("#grid").data("kendoGrid").bind("change", onRowSelection);    
  48.         var grid=$("#grid");    
  49.     
  50.         $('#grid').data('kendoGrid').dataSource.bind('change',function(e){    
  51.             fnGridSort(e);    
  52.         });    
  53.     });    
  54.     
  55.     function onRowSelection() {    
  56.         var a = this.dataItem(this.select());    
  57.         alert(a.EmployeeName);    
  58.         alert(a.City);    
  59.         alert(a.State);    
  60.         alert(a.PhoneNo);    
  61.     }    
  62.     
  63.     function fnGridSort(e) {    
  64.         var gridHeader = $('#grid').data('kendoGrid').dataSource.sort();    
  65.         var columns = gridHeader[0];    
  66.         var sortOrder = columns.dir;    
  67.         var sortField=columns.field;    
  68.         alert(sortOrder + ' ' + sortField);    
  69.     }    
  70. </script>   
Also, on the click of a grid row, the data will be shown in an alert.