神刀安全网

Populate The Kendo Grid On Button Click Event

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: Populate The Kendo Grid On Button Click Event

Populate The Kendo Grid On Button Click Event  

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: Populate The Kendo Grid On Button Click Event

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 

Populate The Kendo Grid On Button Click Event

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

  1. 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 observer 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

Populate The Kendo Grid On Button Click Event

Click the button to display the Kendo Grid.

Populate The Kendo Grid On Button Click Event                                                                               

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

Read more articles on jQuery

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Populate The Kendo Grid On Button Click Event

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮