Post
Ask Question

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.


Similar Articles