Post
Ask Question

Frozen Column In Dynamic Kendo Grid Using ASP.NET WEB API

Introduction

This article tells about how to implement the frozen column in Dynamic Kendo Grid, using ASP.NET WEB API Application. To explain it, I have created a RESTful GET Service, using ASP.NET WEB API, which is used to load the DataSource of Kendo Grid to generate a dynamic column with the frozen column.

Prerequisites

Basic knowledge in ASP.NET WEB API, jQuery, Kendo UI.

This article flows as follows.

  1. Creating an ASP.NET Web API Application.
  2. Creating a Controller.
  3. Testing the REST API.
  4. Construct a dynamic grid with the frozen column

Creating an ASP.NET WEB API Application

Create a Web API Application, using an installed Web template in Visual Studio, as shown below. In my case, I named the application “KendoGridDynamicColumn".

                                                                                         Figure 1 
 
    
                                                     Figure 2  

Creating model classes

In the Solution Explorer, right click on Models folder, select Add followed by Class and name it Employee.cs.

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

Creating a Controller

Right click on Controller folder and add a new Web API 2- Empty controller, as shown in the Figure 3. In my case, I named it EmployeeController.cs.

 
                                                   Figure 3  
EmployeeController.cs 
  1. [RoutePrefix("api/Employee")]  
  2. public class EmployeeController : ApiController  
  3. {  
  4.     [HttpGet]  
  5.     [AllowAnonymous]  
  6.     [Route("EmployeeList")]  
  7.     public HttpResponseMessage GetEmployee()  
  8.     {  
  9.         try  
  10.         {  
  11.             List<Employee> EmpLists = new List<Employee>();  
  12.             EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst","Company A"));  
  13.             EmpLists.Add(new Employee(2, "Krishn Mahato", "Development","Company B"));  
  14.             EmpLists.Add(new Employee(3, "Bob Ross", "Testing","Company A"));  
  15.             EmpLists.Add(new Employee(4, "Steve Davis", "Development","Company A"));  
  16.             EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure","Company B"));  
  17.             EmpLists.Add(new Employee(6, "James Anderson", "HR","Company A"));  
  18.             return Request.CreateResponse(HttpStatusCode.OK, EmpLists, Configuration.Formatters.JsonFormatter);  
  19.         }  
  20.         catch (Exception ex)  
  21.         {  
  22.             return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);  
  23.         }  

Employee Controller Action GetEmployee will return a list of the employees.

Testing the REST API

Test API, using the POSTMAN/Fiddler, as shown in Figure 4.

  • API End Point /api/Employee/EmployeeList.
  • Type GET.
 
                                                          Figure 4 

Creating a HTML page

Create one new HTML page in the Application, where we are going to construct dynamic Kendo Grid with the frozen column, using the RESTful Service. In my case, I named it as DynamicKendoGrid.html.

Construct a Dynamic Kendo Grid with Frozen Column

Kendo Grid is automatically populated, using the DataSource, which is set based on the Service which we are providing.

Write the code in the newly created HTML page.

DynamicKendoGrid.html 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <h3> Dynamic kendo Grid with Frozen/Locked Column</h3>  
  19.     <div id="grid" style="width:800px"></div>  
  20. </body>  
  21.   
  22. </html>  
  23. <script type="text/javascript">  
  24.       
  25.     $(document).ready(function () {  
  26.         $.ajax({  
  27.             url: "/api/Employee/EmployeeList",  
  28.             success:function(result)  
  29.             {                                       
  30.                 generateGrid(result);  
  31.                  
  32.             }  
  33.         })  
  34.          
  35.           
  36.   
  37.     })  
  38.     function generateGrid(gridData) {  
  39.           
  40.         var model = generateModel(gridData[0]);             
  41.         $("#grid").kendoGrid({  
  42.             dataSource: {  
  43.                 data: gridData,  
  44.                  model: model,                               
  45.             },  
  46.             selectable: true,  
  47.             pageable:{  
  48.                 pageSize:5  
  49.             },  
  50.             sortable: true,  
  51.          columns: ColumnGeneration(gridData),  
  52.         }).data('kendoGrid');  
  53.   
  54.     }  
  55.   
  56.     function generateModel(gridData) {  
  57.         var model = {};  
  58.         model.id = "EmployeeID";  
  59.         var fields = {};  
  60.         for (var property in gridData) {  
  61.             var propType = typeof gridData[property];  
  62.             if (propType == "number") {  
  63.                 fields[property] = {  
  64.                     type: "number",  
  65.                     validation: {  
  66.                         required: true  
  67.                     }  
  68.                 };  
  69.             } else if (propType == "boolean") {  
  70.                 fields[property] = {  
  71.                     type: "boolean",  
  72.                     validation: {  
  73.                         required: true  
  74.                     }  
  75.                 };  
  76.             } else if (propType == "string") {  
  77.                 var parsedDate = kendo.parseDate(gridData[property]);  
  78.                 if (parsedDate) {  
  79.                     fields[property] = {  
  80.                         type: "date",  
  81.                         validation: {  
  82.                             required: true  
  83.                         }  
  84.                     };  
  85.                     dateFields.push(property);  
  86.                 } else {  
  87.                     fields[property] = {  
  88.                         validation: {  
  89.                             required: true  
  90.                         }  
  91.                     };  
  92.                 }  
  93.             } else {  
  94.                 fields[property] = {  
  95.                     validation: {  
  96.                         required: true  
  97.                     }  
  98.                 };  
  99.             }  
  100.   
  101.         }  
  102.         model.fields = fields;  
  103.   
  104.         return model;  
  105.     }  
  106.   
  107.     function ColumnGeneration(gridData)  
  108.     {  
  109.         debugger;  
  110.         var gridObj = gridData[0];  
  111.         GridTitleArray = [];  
  112.           
  113.         $.each(gridObj, function (gridTitle, element) {  
  114.             GridTitleArray.push(gridTitle)  
  115.         });  
  116.         GridColumnGeneration = [];  
  117.         for(var i=0;i<GridTitleArray.length;i++)  
  118.         {  
  119.             if (GridTitleArray[i] == 'EmployeeID')  
  120.             {  
  121.                 GridColumnGeneration.push({  
  122.                     title: GridTitleArray[i], field: GridTitleArray[i], locked: true,  
  123.                     lockable: false, width: 150  
  124.                 })  
  125.             }  
  126.           
  127.             else if (GridTitleArray[i] == 'EmployeeName')  
  128.             {  
  129.                 GridColumnGeneration.push({  
  130.                     title: GridTitleArray[i], field: GridTitleArray[i], locked: true, template: '<a onclick="rowFunction()" href="\\#">#=EmployeeName#</a>', width: 300  
  131.                 })  
  132.             }  
  133.             else{  
  134.                 GridColumnGeneration.push({ title: GridTitleArray[i], field: GridTitleArray[i], lockable: false, width: 200 })  
  135.             }  
  136.   
  137.         }  
  138.         return GridColumnGeneration;  
  139.   
  140.     }  
  141.     function rowFunction()  
  142.     {  
  143.         alert("hello!!")  
  144.     }  
  145. </script>   

From the code mentioned above, you can observe the functionalities given below to construct the Dynamic Grid.

  1. AJAX call is passed when the page loads to get the response from the API Service and the grid generation function is called when AJAX call is completed successfully
  2. generateGrid function is used to construct the grid, which is based on the response from the Service.
  3. generateModel function is used to generate the model for the Grid to load its schema.
  4. The locked property in the column is used to lock the column when it is set to true. In our code, we have set EmployeeID and EmployeeName Colummn as locked true.
  5. The lockable property in the column is used to make the column remain in the side of the grid into which its own locked configuration is placed, when it set to false.
  6. Setting the lockable as false will prevent the user from locking or unlocking the column, using the user interface.
  7. We need to define the column width when the frozen/locked column is enabled.
Result
 
 
                                                     Figure 5 
 
I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.
 
Get the source code from Github


Similar Articles