JQuery

Customize Boolean Field In Kendo Grid Using Template

Today I came across one scenario in my project where I need to customize the default Boolean text (true/false) in Kendo Grid to some other meaningful name.

I am going to explain how to perform this customized operation from ASP.NET WEB API service response.

Please refer my previous article: Export grid data to excel in advance Kendo UI using MVC WEB API and Entity Framework where I have explained how to create a WEB API Service.

My SQL Table Values as shown in the following figure 1:

 
                                 Figure 1

The JSON Response from the WEB API service:

  1. [{"Success":true,"ProductName":"AnnualMembership","OrderID":1},  
  2.   
  3. {"Success":true,"ProductName":"AnnualMembership","OrderID":2},  
  4.   
  5. {"Success":true,"ProductName":"TestProduct","OrderID":6},  
  6.   
  7. {"Success":true,"ProductName":"Test Product","OrderID":18}  
  8.   
  9. {"Success":false,"ProductName":"Test Product","OrderID":46}]   

Create an HTML page in your project

Design in HTML Page

  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/2015.3.930/styles/kendo.common.min.css">    
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">    
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">    
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/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/2015.3.930/js/angular.min.js"></script>    
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>    
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>    
  16. </head>    
  17. <body>  
  18.   
  19. <div id="example" class="container-fluid">  
  20.     <div class="row">  
  21.             <span> Order History</span>  
  22.         </div>  
  23.   
  24.   
  25.         <div id="kGrid" data-role="grid"  
  26.             data-scrollable="true"  
  27.               
  28.             data-columns="[  
  29.                                 { 'field':'ProductName', 'title':'Package Information', 'width':'25%' },  
  30.                                 { 'field':'OrderID',  'title':'OrderID', 'width':'13%'},  
  31.                                 { 'field':'Success', 'title':'Status', 'width':'13%'},  
  32.   
  33.   
  34.                 ]"  
  35.             data-editable="false"  
  36.             data-filterable="true"  
  37.             data-pageable='true'  
  38.             data-bind="source: products,  
  39.              visible: isVisible"  
  40.             style="height: 350px; width: 94%">  
  41.         </div>  
  42.     </div>  
  43.     </div>  
  44. </body>  
  45. </html>  

JavaScript with MVVM Model

  1. var viewModel = kendo.observable({  
  2.             isVisible: true,  
  3.          products: new kendo.data.DataSource({  
  4.                 schema: {  
  5.                     model: {  
  6.                         id: "UserID",  
  7.                         fields: {  
  8.                             OrderID: { type: "number" },  
  9.                             Success:{type:"boolean"},  
  10.                             ProductName: { type: "string" }  
  11.                         }  
  12.                     }  
  13.   
  14.                 },  
  15.                  
  16.                 serverFiltering: true,  
  17.                 serverPaging: true,  
  18.                 serverSorting: true,  
  19.                 batch: true,  
  20.                 transport: {  
  21.                     read: {  
  22.                         url: "/EventService/api/Registration/OrderHistory",  
  23.                         dataType: "json"  
  24.                     },  
  25.                     
  26.                     parameterMap: function (options, operation) {  
  27.                         if (operation !== "read" && options.models) {  
  28.                             return { models: kendo.stringify(options.models) };  
  29.                         }  
  30.                     }  
  31.                 }  
  32.             })  
  33.         });  
  34.   
  35.         kendo.bind($("#example"), viewModel);  

Result in Browser

  
                                                             Figure 2

From the above image you can observe that for the Boolean field of the kendo grid is assigning 'true' for 1 and 'false' for 0.

We can customizing it by using the template in the kendo Grid as shown below:

  1. <script type="text/x-kendo-template" id="Grid-Btn-template2">  
  2.   <div>  #= Success ? 'Paid' : 'Pending' # </div>  
  3. </script>   

The Success It is one of the Boolean field in Kendo Grid.

‘Paid’à The ‘true’ in Kendo grid is replaced to ‘Paid’.

‘Pending’à The ‘false’ in Kendo grid is replaced to ‘pending’.

The Complete code to apply the template in Kendo Grid:

  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/2015.3.930/styles/kendo.common.min.css">    
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">    
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">    
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/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/2015.3.930/js/angular.min.js"></script>    
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>    
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>    
  16. </head>    
  17. <body>  
  18. <script type="text/x-kendo-template" id="Grid-Btn-template2">  
  19.   <div>  #= Success ? 'Paid' : 'Pending' # </div>  
  20. </script>  
  21.   
  22. <div id="example" class="container-fluid">  
  23.     <div class="row">  
  24.             <span> Order History</span>  
  25.         </div>  
  26.   
  27.   
  28.         <div id="kGrid" data-role="grid"  
  29.             data-scrollable="true"  
  30.               
  31.             data-columns="[  
  32.                                 { 'field':'ProductName', 'title':'Package Information', 'width':'25%' },  
  33.                                 { 'field':'OrderID',  'title':'OrderID', 'width':'13%'},  
  34.                                 { 'field':'Success', 'title':'Status',template: kendo.template($('#Grid-Btn-template2').html()), 'width':'13%'},  
  35.   
  36.   
  37.                 ]"  
  38.             data-editable="false"  
  39.             data-filterable="true"  
  40.             data-pageable='true'  
  41.             data-bind="source: products,  
  42.     visible: isVisible"  
  43.             style="height: 350px; width: 94%">  
  44.         </div>  
  45.     </div>  
  46.     </div>  
  47. </body>  
  48. </html>  
JavaScript with MVVM Model  
  1. var viewModel = kendo.observable({  
  2.             isVisible: true,  
  3.          products: new kendo.data.DataSource({  
  4.                 schema: {  
  5.                     model: {  
  6.                         id: "UserID",  
  7.                         fields: {  
  8.                             OrderID: { type: "number" },  
  9.                             Success:{type:"boolean"},   
  10.                             ProductName: { type: "string" }  
  11.                         }  
  12.                     }  
  13.   
  14.                 },  
  15.                  
  16.                 serverFiltering: true,  
  17.                 serverPaging: true,  
  18.                 serverSorting: true,  
  19.                 batch: true,  
  20.                 transport: {  
  21.                     read: {  
  22.                         url: "/EventService/api/Registration/OrderHistory",  
  23.                         dataType: "json"  
  24.                     },  
  25.                     
  26.                     parameterMap: function (options, operation) {  
  27.                         if (operation !== "read" && options.models) {  
  28.                             return { models: kendo.stringify(options.models) };  
  29.                         }  
  30.                     }  
  31.                 }  
  32.             })  
  33.         });  
  34.   
  35.         kendo.bind($("#example"), viewModel);  
Result in Browser
 
                                                             Figure 3

From the above figure you can observe that the 'true' is replaced with 'Paid' and the 'false' is replaced with 'Pending'.

I hope you have enjoyed this article, Thank you.

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