Populate 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.

2 Comments

Join the conversation! Your thoughts help the community grow.

Savan Parmar9y ago
Function initializeGrid(gridName, url, onSelectFunction) { onSelectFunction = onSelectFunction || null; var transport = { read: { //type: "POST", url: url, dataType: "json" } }; var dataSource = new kendo.data.DataSource({ transport: transport, pageSize: 30, schema: { model: { id: "ClientID", fields: { ClientID: { type: "number", editable: false }, ClientName: { type: "string", validation: { required: true } } } } } }); $("#" + gridName).kendoGrid({ dataSource: dataSource, scrollable: true, height: 550, selectable: "multiple cell", filterable: true, columns: [ { field: "ClientID",filterable: false,widthd:100 }, { Template: ("<input type='checkbox' id='#:data.ClientID#' class='k-checkbox'/><label class='k-checkbox-label' onclick='event.stopPropagation()' for='#:data.ClientID#'></label>") }, { field: "ClientName",title: "Client Name",width: 200 } ] }); $("#" + gridName).data("kendoGrid").bind(); //$("#" + gridName).attr("data-val-number", "Invalid input."); } this is my code that i used to generate kendo grid, somehow it is not setting data source, can you please help with this?
- Debasis Saha9y ago
  r u using mvc or angularjs