Post
Ask Question

Change The Kendo Grid DataSource On 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 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:

  1. class EmployeeList  
  2.     {  
  3.           
  4.         public EmployeeList(int EmpId, string EmployeeName, string Designation)  
  5.         {  
  6.             this.EmployeeID = EmpId;  
  7.             this.EmployeeName = EmployeeName;  
  8.             this.Designation = Designation;  
  9.         }  
  10.         public int EmployeeID { get; set; }  
  11.         public string EmployeeName { get; set; }  
  12.         public string Designation { get; set; }  
  13.   
  14.           
  15.     }  

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 
  1. [RoutePrefix("api/Employee")]  
  2.     public class EmployeeController : ApiController  
  3.     {  
  4.   
  5.         //Company A  
  6.         [HttpGet]  
  7.         [AllowAnonymous]  
  8.         [Route("GetEmployeeListA")]  
  9.         public HttpResponseMessage GetEmployeeA()  
  10.         {  
  11.             try {   
  12.             List<EmployeeList> _emp = new List<EmployeeList>();  
  13.             _emp.Add(new EmployeeList(1, "Arun", "Software Engineer"));  
  14.             _emp.Add(new EmployeeList(2, "Pradeep", "Infrastructure Engineer"));  
  15.             _emp.Add(new EmployeeList(3, "Jai", "HR"));  
  16.             return Request.CreateResponse(HttpStatusCode.OK, _emp, Configuration.Formatters.JsonFormatter);  
  17.             }  
  18.             catch(Exception ex)  
  19.             {  
  20.                 return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);  
  21.             }  
  22.   
  23.         }  
  24.   
  25.         //Company B  
  26.         [HttpGet]  
  27.         [AllowAnonymous]  
  28.         [Route("GetEmployeeListB")]  
  29.         public HttpResponseMessage GetEmployeeB()  
  30.         {  
  31.             try  
  32.             {  
  33.                 List<EmployeeList> _emp = new List<EmployeeList>();  
  34.                 _emp.Add(new EmployeeList(1, "Asif", "Software Engineer"));  
  35.                 _emp.Add(new EmployeeList(2, "Dinesh", "Infrastructure Engineer"));  
  36.                 _emp.Add(new EmployeeList(3, "James", "HR"));  
  37.                 return Request.CreateResponse(HttpStatusCode.OK, _emp, Configuration.Formatters.JsonFormatter);  
  38.             }  
  39.             catch (Exception ex)  
  40.             {  
  41.                 return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);  
  42.             }  
  43.   
  44.         }  
  45.   
  46.   
  47.     }  
The above employee controller action GetEmployeeA and GetEmployeeB will return an employee list of company A and company B respectively.

API Test

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

API End Point: /api/Employee/GetEmployeeListA

Type : GET
 
 

API End Point: /api/Employee/GetEmployeeListB

Type : GET 
 
  
 
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:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <title></title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>  
  16.       
  17.     <meta charset="utf-8" />  
  18. </head>  
  19. <body>  
  20.     <div id="example">  
  21.         <div class="row">  
  22.   
  23.             <button id="Btn" class="k-button" data-bind="click:DisplayGridA">Show Company A</button>  
  24.             <button id="Btn_B" class="k-button" data-bind="click:DisplayGridB">Show Company B</button>  
  25.         </div>  
  26.         <br/>  
  27.         <br />  
  28.         <div class=row>  
  29.             <div id="grid" data-role="grid" data-filterable="true" data-pegeable="true"  
  30.                  data-columns="[  
  31.         {'field':'EmployeeName','title':'Name'},  
  32.         {'field':'Designation','title':'Designation'},  
  33.   
  34.   
  35.         ]"  
  36.                  data-bind="source: dataSourceA,visible: isVisible," style="height: 200px"  
  37.         </div>  
  38.         </div>  
  39.     </div>  
  40.     <script>  
  41.     var viewModel = kendo.observable({  
  42.         isVisible: true,  
  43.         DisplayGridA:function(e)  
  44.         {  
  45.             e.preventDefault();  
  46.             var grid = $("#grid").data("kendoGrid");  
  47.             grid.setDataSource(viewModel.dataSourceA)  
  48.   
  49.         },  
  50.         DisplayGridB: function (e) {  
  51.             e.preventDefault();  
  52.             var grid = $("#grid").data("kendoGrid");  
  53.             grid.setDataSource(viewModel.dataSourceB)  
  54.   
  55.         },  
  56.         dataSourceA: new kendo.data.DataSource({  
  57.             schema: {  
  58.                 model: {  
  59.                     id: "EmpId",  
  60.                     fields: {  
  61.                         EmployeeName: { type: "string" },  
  62.                         Designation: { type: "string" }  
  63.                     }  
  64.                 }  
  65.             },  
  66.             batch: true,  
  67.             transport: {  
  68.                 read: {  
  69.                     url: "/api/Employee/GetEmployeeListA",  
  70.                     dataType: "json"  
  71.                 },  
  72.               
  73.                 parameterMap: function(options, operation) {  
  74.                     if (operation !== "read" && options.models) {  
  75.                         return {models: kendo.stringify(options.models)};  
  76.                     }  
  77.                 }  
  78.             }  
  79.         }),  
  80.         dataSourceB: new kendo.data.DataSource({  
  81.             schema: {  
  82.                 model: {  
  83.                     id: "EmpdId",  
  84.                     fields: {  
  85.                         EmployeeName: { type: "string" },  
  86.                         Designation: { type: "string" }  
  87.                     }  
  88.                 }  
  89.             },  
  90.             batch: true,  
  91.             transport: {  
  92.                 read: {  
  93.                     url: "/api/Employee/GetEmployeeListB",  
  94.                     dataType: "json"  
  95.                 },    
  96.   
  97.                 parameterMap: function (options, operation) {  
  98.                     if (operation !== "read" && options.models) {  
  99.                         return { models: kendo.stringify(options.models) };  
  100.                     }  
  101.                 }  
  102.             }  
  103.         })  
  104.     });  
  105.     kendo.bind($("#example"), viewModel);  
  106.     </script>  
  107. </body>  
  108. </html>  

Initially the kendo grid is bind with dataSourceA which is set as source of kendo grid

In our design we have two buttons which are responsible to switch the kendo grid dataSource.

  1. Show Company A – Button: 

    This button is used to trigger the DisplayGridA function which is used to set the dataSourceA as DataSource of the kendo grid using the setDataSource function.

    setDataSource: This function is used to set the datasource of kendo widget(in our case it is grid).

    2. Show Company B – Button

    This button is used to trigger the DisplayGridB function which is used to set the dataSourceB as DataSource of the kendo grid using the setDataSource function

Result in Browser, while clicking the Show Company A Button

   
 Result in Browser, while clicking the Show Company B Button
 
 
I hope you have enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.
Read more articles on jQuery:


Similar Articles