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. }
  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");
  50. $('#grid').data('kendoGrid').dataSource.bind('change',function(e){
  51. fnGridSort(e);
  52. });
  53. });
  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. }
  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.