JQuery

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. 
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