Populate The Kendo Grid On Button Click Event In ASP.NET Application

Before going through this article ensure that you have a basic understanding of the MVC Architecture, ASP.NET Web API and jQuery.

Let us start with creating an ASP.NET WEB API Application.

Creating an Empty ASP.NET WEB API Project

Create a simple empty WEB API project as in the following figures:

Creating a Model Class

Right click on the model folder and add a new class, in my case I named it EmployeeList.cs:

Code in EmployeeList.cs:

class EmployeeList
{
public EmployeeList(int EmpId, string EmployeeName, string Designation)
{
this.EmployeeID = EmpId;
this.EmployeeName = EmployeeName;
this.Designation = Designation;
}
public int EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string Designation { get; set; }
}

Creating a Controller

Right click on the Controller folder and add a new WEB API 2- Empty controller as in the figure 3, in my case I named it EmployeeController.cs:

Code in EmployeeController.cs

[RoutePrefix("api/Employee")]
public class EmployeeController : ApiController
{
[HttpGet]
[AllowAnonymous]
[Route("GetEmployeeList")]
public HttpResponseMessage GetEmployee()
{
try {
List<EmployeeList> _emp = new List<EmployeeList>();
_emp.Add(new EmployeeList(1, "Arun", "Software Engineer"));
_emp.Add(new EmployeeList(2, "Pradeep", "Infrastructure Engineer"));
_emp.Add(new EmployeeList(3, "Jai", "HR"));
return Request.CreateResponse(HttpStatusCode.OK, _emp, Configuration.Formatters.JsonFormatter);
}
catch(Exception ex)
{
return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
}
}
}

The above employee controller action will return an employee list as a response.

API Test

Test the API using the POSTMAN/Fiddler as in the following figure 4:

API End Point: /api/Employee/GetEmployeeList

The API is working fine, now it's ready to consume.

Using a Kendo Grid with MVVM pattern

Please read my previous article to get more details about implementing Kendo Grid.

Creating a HTML page

Create a new HTML page in the project.

Design:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script><script src="JavaScript/Model/MemReportCore.js"></script>
<script src="JavaScript/ViewModel/MemberReportViewModel.js"></script>
</head>
<body>
<style>
.k-input {
font-weight: normal;
}
</style>
<div class="col-lg-12">
<div id="Main" class="main"></div>
</div>
<script type="text/x-kendo-template" id="Layout-temp">
<div class="col-lg-12">
<div id="content"></div>
</div>
</script>
<script type="text/x-kendo-template" id="Dashboard-temp">
<div class="row">
<button id="Btn" data-bind="click:DisplayGrid">Show Grid</button>
<div class=row>
<div id="grid" data-role="grid" data-filterable="true" data-pegeable="true"
data-columns="[
{'field':'EmployeeName','title':'Name'},
{'field':'Designation','title':'Designation'},
]"
data-bind="source: dataSource,visible: isVisible," style="height: 200px"
</div>
</div>
</div>
</script>
</body>
</html>

Creating a JavaScript files

View Model: Create a JavaScript file, in my case I named it ViewModel.Js, The View-Model is a representation of your data (the Model) which will be displayed in the View.

ViewModel.Js

(function (G, $, undefined) {
$.extend(true, G, {
KendoGrid: {
ViewModel: {
DashboardModel: new kendo.observable({
isVisible: false,
DisplayGrid: function (e) {
e.preventDefault();
G.KendoGrid.ViewModel.DashboardModel.set("isVisible", true);
$.ajax(
{
type: 'GET',
url: '/api/Employee/GetEmployeeList',
dataType: 'json',
success: function (result) {
$("#grid").data("kendoGrid").dataSource.data(result);
}
});
var grid = $("#grid").data("kendoGrid");
grid.dataSource.read();
},
}),
}
}
});
})(window.Gni = window.Gni || {}, jQuery);

Initially the Kendo grid is hidden by setting the visible property as false.

From the above script you can observe that the DisplayGrid function which will fire when the button is clicked is used to set the visible property to true and to bind the ajax call result with datasource of the Kendo grid.

Core: Create a JavaScript file, in my case I named it Core.Js.

This core script is used to start the rendering of the templates and calls the view model to bind the data in the UI.

Core.js

$(function () {
var Layout = new kendo.Layout("Layout-temp");
var DashboardView = new kendo.View("Dashboard-temp", { model: Gni.KendoGrid.ViewModel.DashboardModel });
var router = new kendo.Router({
init: function () {
Layout.render("#Main");
Layout.showIn("#content", DashboardView);
}
});
router.start();
});

The Result in Browser

Click the button to display the Kendo Grid.

I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcomed.