In this article you will learn how to 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:
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:
The above employee controller action will return an employee list as a response.
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:
Creating a JavaScript files
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
The Result in Browser
ASP.NET MVC 5: A Beginner’s Guide