Post
Ask Question

Use Of Kendo Grid View Function

Introduction

This blog tells you the use of view function in Kendo Grid. To explain it, I am going to use Kendo Grid, which is a remote bind.

Kendo Grid with remote binding 

Create a new HTML page. In my case, I named it as KendoGrid.html and write the code given below in it. 

KendoGrid.html
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Kendo Grid</title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css" />  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />  
  11.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>  
  13. </head>  
  14.   
  15. <body>  
  16.     <div id="example">  
  17.         <div id="grid"></div>  
  18.         
  19.          
  20.         <script>  
  21.   
  22.             $(document).ready(function() {  
  23.                 $("#grid").kendoGrid({  
  24.                     dataSource: {  
  25.                         type: "json",  
  26.                         transport: {  
  27.                             read: "/api/Employee/EmployeeList"  
  28.                         },  
  29.                         schema: {  
  30.                             model: {  
  31.                                 fields: {  
  32.                                     EmployeeID: {  
  33.                                         type: "number"  
  34.                                     },  
  35.                                     EmployeeName: {  
  36.                                         type: "string"  
  37.                                     },  
  38.                                     Designation: {  
  39.                                         type: "string"  
  40.                                     },  
  41.                                     Company: {  
  42.                                         type: "string"  
  43.                                     }  
  44.                                 }  
  45.                             }  
  46.                         },  
  47.                     },  
  48.                     filterable: true,  
  49.                     sortable: true,  
  50.                     pageable: true,  
  51.                     columns: [{  
  52.                         field: "EmployeeID",  
  53.                         filterable: false  
  54.                     }, {  
  55.                         field: "EmployeeName",  
  56.                         title: "EmployeeName",  
  57.                         filterable: { multi: true, search: true }  
  58.                     }, {  
  59.                         field: "Designation",  
  60.                         title: "Designation"  
  61.                     }, {  
  62.                         field: "Company",  
  63.                         title: "Company",  
  64.                     }]  
  65.                 });  
  66.                  
  67.             });  
  68.            
  69.         </script>  
  70.     </div>  
  71. </body>  
  72.   
  73. </html>    
Please refer to my provious article to get to know how to create a WEB API and remote bind the response in Kendo Grid DataSource.

Result in Browser

 

View function in Kendo Grid

The view function in Kendo Grid is used to retrieve the complete details of the record, which is shown in Kendo Grid UI for the users. It is very useful to get the current data, which is shown to the user when sorting, filtering and the paging is applied in the grid.

KendoGrid.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Kendo Grid</title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css" />  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />  
  11.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>  
  13. </head>  
  14.   
  15. <body>  
  16.     <div id="example">  
  17.         <div id="grid"></div>  
  18.         <br />  
  19.         <div id="btnKendoView">  
  20.             <button id="btnClick" class="k-button">Click Me</button>  
  21.         </div>  
  22.         <script>  
  23.   
  24.             $(document).ready(function() {  
  25.                 $("#grid").kendoGrid({  
  26.                     dataSource: {  
  27.                         type: "json",  
  28.                         transport: {  
  29.                             read: "/api/Employee/EmployeeList"  
  30.                         },  
  31.                         schema: {  
  32.                             model: {  
  33.                                 fields: {  
  34.                                     EmployeeID: {  
  35.                                         type: "number"  
  36.                                     },  
  37.                                     EmployeeName: {  
  38.                                         type: "string"  
  39.                                     },  
  40.                                     Designation: {  
  41.                                         type: "string"  
  42.                                     },  
  43.                                     Company: {  
  44.                                         type: "string"  
  45.                                     }  
  46.                                 }  
  47.                             }  
  48.                         },  
  49.                     },  
  50.                     filterable: true,  
  51.                     sortable: true,  
  52.                     pageable: true,  
  53.                     columns: [{  
  54.                         field: "EmployeeID",  
  55.                         filterable: false  
  56.                     }, {  
  57.                         field: "EmployeeName",  
  58.                         title: "EmployeeName",  
  59.                         filterable: { multi: true, search: true }  
  60.                     }, {  
  61.                         field: "Designation",  
  62.                         title: "Designation"  
  63.                     }, {  
  64.                         field: "Company",  
  65.                         title: "Company",  
  66.                     }]  
  67.                 });  
  68.                  
  69.             });  
  70.             $("#btnClick").click(function () {  
  71.                   
  72.                 var currentViewData = $("#grid").data("kendoGrid").dataSource.view();  
  73.                   
  74.                 console.log(currentViewData);  
  75.             })  
  76.         </script>  
  77.     </div>  
  78. </body>  
  79.   
  80. </html>    
currentViewData variable is used to hold the complete details of the record shown in the grid, which is retrieved from the DataSource of Kendo Grid, using View() function.

Result in the Browser

 

After Filtering, it is shown below.


As you notice the Image given above, we have got only two records details, which is currently shown in the grid after filtering.

I hope, you have enjoyed this blog. Your valuable feedback, questions and comments about this blog are always welcome.