JQuery

Working With Row Template In Kendo Grid

Implementing the Row template makes the Kendo Grid more flexible while working with the custom columns. To explain how to implement the Row template in the Kendo Gird, I am going to use the following API, which is used as a source to populate the Grid. Please read my previous article to get an idea about how to create an API using ASP.NET WEB API.

API:

GET: /api/Employees

Response of the above End Point in POSTMAN

 
                                                                               
Database Table:

  
 
Now the API is ready to consume.

Using a Kendo Grid with MVVM pattern

Creating a HTML page

Create a new HTML page in the project.

Design:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  9.   
  10.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  11.     <script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>  
  13.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  14.     <script src="Scripts/ViewModel/Core.js"></script>  
  15.     <script src="Scripts/ViewModel/Data.js"></script>  
  16.     <script src="Scripts/ViewModel/ViewModel.js"></script>  
  17.   
  18. </head>  
  19. <body>  
  20.   
  21.     <div class="col-lg-12">  
  22.         <div id="Main" class="main"></div>  
  23.     </div>  
  24.   
  25.     <script type="text/x-kendo-template" id="Layout-temp">  
  26.         <div class="col-lg-12">  
  27.             <div id="content"></div>  
  28.         </div>  
  29.     </script>  
  30.   
  31.     <script type="text/x-kendo-template" id="Dashboard-temp">  
  32.         <div class="row margin-t10">  
  33.             <div class="col-lg-12">  
  34.                 <div data-role="grid" id="EmployeeGrid"  
  35.                       data-sortable="true"  
  36.             data-scrollable="true"  
  37.             data-resizable="true"  
  38.             data-pageable="{refresh: true, pageSizes: [25, 50, 100, 200]}"  
  39.                       data-row-template="EmployeeGrid_RowTemplate"  
  40.             data-columns="[  
  41.   
  42.                          { 'field': 'FirstName','width':'100px'},  
  43.                         { 'field': 'LastName','width':'100px' }  
  44.                 ]"  
  45.                 data-bind="source:Gridlist,events:{dataBound: onDataBound}" />  
  46.   
  47.             </div>  
  48.         </div>  
  49.     </script>  
  50.     <script type="text/x-kendo-template" id="EmployeeGrid_RowTemplate">   
  51.         <tr data-uid="#: uid #">   
  52.             <td><span>#= FirstName #</span></td>  
  53.           
  54.           
  55.                 <td><span>#= LastName #</span></td>  
  56.             </tr>  
  57.     </script>  
  58.   
  59.      
  60.   
  61. </body>  
  62. </html>  

In the Row template I have set the Uid’s for table row because by default each row in Kendo grid will consist of unique uid’s as in the following figure.

 
 
Creating a JavaScript file

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

  1. (function (G, $, undefined) {  
  2.   
  3.   
  4.     $.extend(true, G, {  
  5.         KendoGrid: {  
  6.             ViewModel: {  
  7.                 DashboardModel: new kendo.observable({  
  8.                     Gridlist: G.KendoGrid.Data.GridList,                      
  9.                     onDataBound: function (e) {  
  10.                         $('#EmployeeGrid thead').each(function () {  
  11.                             kendo.bind($(this), G.KendoGrid.ViewModel.DashboardModel);  
  12.                         });  
  13.                     },  
  14.                 }),  
  15.             }  
  16.         }  
  17.             });  
  18. })(window.Gni = window.Gni || {}, jQuery);  

The onDataBound function is used to bind the Models in the Grid.

       Data: Create a JavaScript file, in my case I named it Data.Js, This script is responsible to bind the DataSource by requesting the API.

Data.js 

  1. (function (G, $, K, undefined) {  
  2.   
  3.     $.extend(true, G, {  
  4.         KendoGrid: {  
  5.             Data: {  
  6.                 GridList: new K.data.DataSource({  
  7.                     //navigatable: true,  
  8.                     batch: true,  
  9.                     pageSize: 5,  
  10.                     transport: {  
  11.                         read: {  
  12.                             url: 'api/Employees',  
  13.                             type: 'GET',  
  14.                             dataType: 'json',  
  15.                             
  16.                         },  
  17.                         parameterMap: function (data, operation) {  
  18.                             if (operation == "read") {  
  19.                                   
  20.                                 return JSON.stringify(data);  
  21.                             }  
  22.                             return data;  
  23.                         }  
  24.                     },  
  25.                     schema: {  
  26.                         
  27.                         model: {  
  28.                             id: "EmployeeID",  
  29.                             fields: {  
  30.                                 "FirstName": { type: "string” },  
  31.                                 "LastName": { type: "string"},  
  32.                                  
  33.                             }  
  34.                         }  
  35.                     },  
  36.                       
  37.                      
  38.                 }),  
  39.                 
  40.             }  
  41.         }  
  42.     });  
  43. })(window.Gni = window.Gni || {}, jQuery, kendo);     

       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

  1. $(function () {  
  2.     var Layout = new kendo.Layout("Layout-temp");  
  3.     var DashboardView = new kendo.View("Dashboard-temp", { model: Gni.KendoGrid.ViewModel.DashboardModel });  
  4.     var router = new kendo.Router({  
  5.         init: function () {  
  6.             Layout.render("#Main");  
  7.             Layout.showIn("#content", DashboardView);  
  8.        
  9.         }  
  10.     });  
  11.     router.start();  
  12.      
  13.      
  14. });  

Result in Browser:

  
                                                                                          

Let us customize the Kendo Grid with ease using the row template.

Consider the scenario where you need to display the full name instead of displaying the first name and last name, here the row templates comes into the picture.

Just modify the above HTML code as below: 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  9.   
  10.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  11.     <script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>  
  13.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  14.     <script src="Scripts/ViewModel/Core.js"></script>  
  15.     <script src="Scripts/ViewModel/Data.js"></script>  
  16.     <script src="Scripts/ViewModel/ViewModel.js"></script>  
  17.   
  18. </head>  
  19. <body>  
  20.   
  21.     <div class="col-lg-12">  
  22.         <div id="Main" class="main"></div>  
  23.     </div>  
  24.   
  25.     <script type="text/x-kendo-template" id="Layout-temp">  
  26.         <div class="col-lg-12">  
  27.             <div id="content"></div>  
  28.         </div>  
  29.     </script>  
  30.   
  31.     <script type="text/x-kendo-template" id="Dashboard-temp">  
  32.         <div class="row margin-t10">  
  33.             <div class="col-lg-12" id="scroll">  
  34.                 <div data-role="grid" id="EmployeeGrid"  
  35.                       data-sortable="true"  
  36.             data-scrollable="true"  
  37.             data-resizable="true"  
  38.             data-pageable="{refresh: true, pageSizes: [25, 50, 100, 200]}"  
  39.                       data-row-template="EmployeeGrid_RowTemplate"  
  40.             data-columns="[  
  41.   
  42.                          { 'title': ' Full Name','width':'100px'},  
  43.                          
  44.                 ]"  
  45.                 data-bind="source:Gridlist,events:{dataBound: onDataBound}" />  
  46.   
  47.             </div>  
  48.         </div>  
  49.     </script>  
  50.     <script type="text/x-kendo-template" id="EmployeeGrid_RowTemplate">  
  51.         <tr data-uid="#: uid #">  
  52.             <td><span>#= FirstName #</span> <span>#= LastName #</span></td>  
  53.             </tr>  
  54.     </script>  
  55.   
  56.      
  57.   
  58. </body>  
  59. </html>   

Result in Browser: 

 
I hope you have enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.
 
Read more articles on jQuery:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs