JQuery

Hide The Rows And Columns In Kendo Grid Using jQuery

Introduction

Today I came across a scenario where I need to hide the record in the kendo grid, which is very handy when we are dealing with the empty records in the Gird. So, in this article article I am going to explain how to hide both the columns and rows in the kendo grid using jQuery.

Description

I am going to use the following REST service to explain how to hide the empty records in the Kendo Grid.

REST service end point: api/products.

Please refer my previous article Export grid data to excel in advance Kendo UI using MVC WEB API and Entity Framework to get an idea about how to create an ASP. NET WEB API Service.

The api/products service response in POSTMAN as in the following figure 1.

  
                                                                           Figure 1

Now it’s time to consume the REST service in the Kendo UI.

Using a Kendo Grid with remote binding

Create an HTML page in your project, in my case I named it KendoGrid.html.

Design in KendoGrid.html

  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />    
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />    
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />    
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />    
  8.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>    
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>    
  10.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>    
  11.     <title></title>    
  12. </head>    
  13. <body>    
  14.     <div class="container" id="example">    
  15.         <div class="row">    
  16.     
  17.             <div id="test-grid" data-role="grid"    
  18.                  data-scrollable="true"    
  19.                  data-editable="false"    
  20.                  data-columns="[    
  21.     
  22.                        { 'field': 'ProductName','width':'100px' },    
  23.                     { 'field': ' UnitPrice','width':'100px'},    
  24.                  ]"    
  25.                  data-pageable='true'    
  26.                  data-bind="source:products"    
  27.                  style="height: 300px"></div>    
  28.     
  29.         </div>    
  30.     </div>    
  31.         
  32. </body>    
  33. </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: "ProductID",      
  7.                 fields: {      
  8.                     ProductName: { type: "string" },      
  9.                     UnitPrice: { type: "string" }      
  10.                 }      
  11.             }      
  12.         },      
  13.         batch: true,      
  14.         pageSize: 5,      
  15.         transport: {      
  16.             read: {      
  17.                 url: "api/Products",      
  18.                 dataType: "json"      
  19.             },      
  20.             parameterMap: function (options, operation) {      
  21.                 if (operation !== "read" && options.models) {      
  22.                     return { models: kendo.stringify(options.models) };      
  23.                 }      
  24.             }      
  25.         }      
  26.     })      
  27. });      
  28. kendo.bind($("#example"), viewModel);   

Result in the web browser

 
                                                                              Figure 2

Suppose if the JSON result is like the following figure 3.

   
                                                                            Figure 3

Then the result in the web browser as in the following figure 4.

 
                                  Figure 4

From the above figure you can notice that the second record Product Name and Unit Price is empty. Even though the record is empty, the Kendo Gird showing it with the empty row. This can be overcomed with the help of jQuery hide function and the Kendo grid UID’s.

What is Kendo UID

Just take a look on the following figure 5.

   
                                                                     Figure 5 

The kendo grid will generate the unique ID which is called UID for each row.

  1. onDataBound: function (e) {    
  2.     var data = this.products.data();    
  3.     for (item in data) {    
  4.         if (data[item].ProductName == '') {    
  5.   
  6.             e.preventDefault();    
  7.             alert(data[item].uid)    
  8.             var grid = $("#userGrid").data("kendoGrid");    
  9.             grid.tbody.find("tr[data-uid=" + data[item].uid + "]").hide()    
  10.         }    
  11.     }    
  12. },    
JavaScript with MVVM Model to hide the Empty record 

Here is the complete code to hide the Empty row in the Kendo Grid.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  8.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  11.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  12.     <meta charset="utf-8" />  
  13. </head>  
  14. <body>  
  15.     <div class="container" id="example">  
  16.         <div class="row">  
  17.   
  18.             <div id="userGrid" data-role="grid"  
  19.                  data-scrollable="true"  
  20.                  data-editable="false"  
  21.                  data-columns="[  
  22.   
  23.                        { 'field': 'ProductName','width':'100px' },  
  24.                     { 'field': ' UnitPrice','width':'100px'},  
  25.                  ]"  
  26.                  data-pageable='true'  
  27.                  data-bind="source:products,events: { dataBound: onDataBound }"  
  28.                  style="height: 300px;width:500px"></div>  
  29.   
  30.         </div>  
  31.     </div>    
  32.     <script>  
  33.         var viewModel = kendo.observable({  
  34.             isVisible: true,  
  35.             products: new kendo.data.DataSource({  
  36.                 schema: {  
  37.                     model: {  
  38.                         id: "ProductID",  
  39.                         fields: {  
  40.                             ProductName: { type: "string" },  
  41.                             UnitPrice: { type: "string" }  
  42.                         }  
  43.                     }  
  44.                 },  
  45.                 batch: true,  
  46.                 pageSize: 5,  
  47.                 transport: {  
  48.                     read: {  
  49.                         url: "api/Products",  
  50.                         dataType: "json"  
  51.                     },  
  52.                     parameterMap: function (options, operation) {  
  53.                         if (operation !== "read" && options.models) {  
  54.                             return { models: kendo.stringify(options.models) };  
  55.                         }  
  56.                     }  
  57.                 },  
  58.              
  59.             }),  
  60.             onDataBound: function (e) {  
  61.                  
  62.                 var data = this.products.data();  
  63.                  
  64.                 for (item in data) {  
  65.                     if (data[item].ProductName == '') {  
  66.   
  67.                         e.preventDefault();  
  68.                         alert(data[item].uid)  
  69.                         var grid = $("#userGrid").data("kendoGrid");  
  70.                         grid.tbody.find("tr[data-uid=" + data[item].uid + "]").hide()  
  71.                     }  
  72.                 }  
  73.             },  
  74.         });  
  75.         kendo.bind($("#example"), viewModel);  
  76.     </script>  
  77. </body>  
  78. </html>  
Result in Browser

 
                                        Figure 6

Hide Column in Kendo Grid

Hiding the column in Kendo Grid is done simply by using the hidden property as in the following HTML design.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  8.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  11.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  12.     <meta charset="utf-8" />  
  13. </head>  
  14. <body>  
  15.     <div class="container" id="example">  
  16.         <div class="row">  
  17.   
  18.             <div id="userGrid" data-role="grid"  
  19.                  data-scrollable="true"  
  20.                  data-editable="false"  
  21.                  data-columns="[  
  22.   
  23.                        { 'field': 'ProductName','width':'100px' },  
  24.                     { 'field': ' UnitPrice','width':'100px','hidden':'true'},  
  25.                  ]"  
  26.                  data-pageable='true'  
  27.                  data-bind="source:products,events: { dataBound: onDataBound }"  
  28.                  style="height: 300px;width:500px"></div>  
  29.   
  30.         </div>  
  31.     </div>    
  32.     <script>  
  33.         var viewModel = kendo.observable({  
  34.             isVisible: true,  
  35.             products: new kendo.data.DataSource({  
  36.                 schema: {  
  37.                     model: {  
  38.                         id: "ProductID",  
  39.                         fields: {  
  40.                             ProductName: { type: "string" },  
  41.                             UnitPrice: { type: "string" }  
  42.                         }  
  43.                     }  
  44.                 },  
  45.                 batch: true,  
  46.                 pageSize: 5,  
  47.                 transport: {  
  48.                     read: {  
  49.                         url: "api/Products",  
  50.                         dataType: "json"  
  51.                     },  
  52.                     parameterMap: function (options, operation) {  
  53.                         if (operation !== "read" && options.models) {  
  54.                             return { models: kendo.stringify(options.models) };  
  55.                         }  
  56.                     }  
  57.                 },  
  58.              
  59.             }),  
  60.             onDataBound: function (e) {  
  61.                  
  62.                 var data = this.products.data();  
  63.                  
  64.                 for (item in data) {  
  65.                     if (data[item].ProductName == '') {  
  66.   
  67.                         e.preventDefault();  
  68.                         alert(data[item].uid)  
  69.                         var grid = $("#userGrid").data("kendoGrid");  
  70.                         grid.tbody.find("tr[data-uid=" + data[item].uid + "]").hide()  
  71.                     }  
  72.                 }  
  73.             },  
  74.         });  
  75.         kendo.bind($("#example"), viewModel);  
  76.     </script>  
  77. </body>  
  78. </html>   

Result in Browser

  
                                                Figure 7

Conclusion

From this article we learned how to hide rows and columns in the the kendo grid using jQuery with MVVM Model.

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