JQuery

Kendo Grid Event Handling Using jQuery

I am going to use the following REST service to explain how to perform event handling 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 HMTL 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> 

JavaScipt 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

 

Events in Kendo Grid

The main events in kendo Grid is listed below:

  1. DataBinding
  2. DataBound
  3. Change

DataBinding Event handling in the Kendo Grid

This event is fired before the Kendo Grid binds to its data source. 

Caution

If we invoke e.preventDefault() in the DataBinding event it will prevent the data bind action, the table rows will remain unchanged and databound event will not fire.

Design in KendoGrid.html

  1. <div class="container" id="example">  
  2.         <div class="row">  
  3.   
  4.             <div id="test-grid" data-role="grid"  
  5.                  data-scrollable="true"  
  6.                  data-editable="false"  
  7.                  data-columns="[  
  8.   
  9.                        { 'field': 'ProductName','width':'100px' },  
  10.                     { 'field': ' UnitPrice','width':'100px'},  
  11.                  ]"  
  12.                  data-pageable='true'  
  13.                  data-bind="source:products, events:{ dataBinding:OnDataBinding }"  
  14.                  style="height: 300px"></div>  
  15.   
  16.         </div>  
  17.     </div> 

JavaScipt with MVVM Model

  1. var viewModel = kendo.observable({    
  2.         isVisible: true,    
  3.            
  4.         OnDataBinding:function()    
  5.         {    
  6.               
  7.             alert("databinding");    
  8.         },    
  9.         products: new kendo.data.DataSource({    
  10.             schema: {    
  11.                 model: {    
  12.                     id: "ProductID",    
  13.                     fields: {    
  14.                         ProductName: { type: "string" },    
  15.                         UnitPrice: { type: "string" }    
  16.                     }    
  17.                 }    
  18.             },    
  19.             batch: true,    
  20.             pageSize: 5,    
  21.             selectable: "multiple cell",    
  22.             transport: {    
  23.                 read: {    
  24.                     url: "api/Products",    
  25.                     dataType: "json"    
  26.                 },    
  27.                 parameterMap: function (options, operation) {    
  28.                     if (operation !== "read" && options.models) {    
  29.                         return { models: kendo.stringify(options.models) };    
  30.                     }    
  31.                 }    
  32.             }    
  33.         })    
  34.     });    
  35.     kendo.bind($("#example"), viewModel) 
Result in the web browser
 
 

DataBound event handling in Kendo Grid

This event is fired when the kendo grid is bound to data from its datasource

Design in KendoGrid.html

  1. <div class="container" id="example">  
  2.         <div class="row">  
  3.   
  4.             <div id="test-grid" data-role="grid"  
  5.                  data-scrollable="true"  
  6.                  data-editable="false"  
  7.                  data-columns="[  
  8.   
  9.                        { 'field': 'ProductName','width':'100px' },  
  10.                     { 'field': ' UnitPrice','width':'100px'},  
  11.                  ]"  
  12.                  data-pageable='true'  
  13.                  data-bind="source:products, events:{dataBound:OnDataBound }"  
  14.                  style="height: 300px"></div>  
  15.   
  16.         </div>  
  17.     </div>  
JavaScipt with MVVM Model
  1. var viewModel = kendo.observable({  
  2.         isVisible: true,  
  3.          
  4.         OnDataBound:function(e)  
  5.         {  
  6.             e.preventDefault();  
  7.             alert("databound")  
  8.         },  
  9.         products: new kendo.data.DataSource({  
  10.             schema: {  
  11.                 model: {  
  12.                     id: "ProductID",  
  13.                     fields: {  
  14.                         ProductName: { type: "string" },  
  15.                         UnitPrice: { type: "string" }  
  16.                     }  
  17.                 }  
  18.             },  
  19.             batch: true,  
  20.             pageSize: 5, 
  21.             transport: {  
  22.                 read: {  
  23.                     url: "api/Products",  
  24.                     dataType: "json"  
  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.     kendo.bind($("#example"), viewModel);  

Result in the web browser

 

Change event handling in Kendo Grid

The change event is fired when we select the row or particular cell in the Kendo Grid

Caution

Before going to handle this event enable the selectable property in the Kendo Grid.

Design in KendoGrid.html

  1. <div class="container" id="example">    
  2.         <div class="row">    
  3.     
  4.             <div id="test-grid" data-role="grid"    
  5.                  data-scrollable="true"    
  6.                  data-editable="false"    
  7.                  data-columns="[    
  8.     
  9.                        { 'field': 'ProductName','width':'100px' },    
  10.                     { 'field': ' UnitPrice','width':'100px'},    
  11.                  ]"    
  12.                  data-pageable='true'    
  13.                 data-selectable="true"  
  14.                  data-bind="source:products, events:{change:onchange }"    
  15.                  style="height: 300px"></div>    
  16.     
  17.         </div>    
  18.     </div>    

JavaScipt with MVVM Model

  1. var viewModel = kendo.observable({  
  2.         isVisible: true,  
  3.         onchange:function(e)  
  4.         {  
  5.             e.preventDefault();  
  6.             alert("Selected")  
  7.         },  
  8.         products: new kendo.data.DataSource({  
  9.             schema: {  
  10.                 model: {  
  11.                     id: "ProductID",  
  12.                     fields: {  
  13.                         ProductName: { type: "string" },  
  14.                         UnitPrice: { type: "string" }  
  15.                     }  
  16.                 }  
  17.             },  
  18.             batch: true,  
  19.             pageSize: 5,  
  20.             transport: {  
  21.                 read: {  
  22.                     url: "api/Products",  
  23.                     dataType: "json"  
  24.                 },  
  25.                 parameterMap: function (options, operation) {  
  26.                     if (operation !== "read" && options.models) {  
  27.                         return { models: kendo.stringify(options.models) };  
  28.                     }  
  29.                 }  
  30.             }  
  31.         })  
  32.     });  
  33.     kendo.bind($("#example"), viewModel);  
Result in the web browser
 
 

We can also perform the cell selection in kendo grid using data-selectable property

Design in KendoGrid.html

  1. <div class="container" id="example">  
  2.         <div class="row">  
  3.   
  4.             <div id="test-grid" data-role="grid"  
  5.                  data-scrollable="true"  
  6.                  data-editable="false"  
  7.                  data-selectable="multiple cell"  
  8.                  data-columns="[  
  9.   
  10.                        { 'field': 'ProductName','width':'100px' },  
  11.                     { 'field': ' UnitPrice','width':'100px'},  
  12.                  ]"  
  13.                  data-pageable='true'  
  14.                  data-bind="source:products, events:{change:onchange }"  
  15.                  style="height: 300px"></div>  
  16.   
  17.         </div>  
  18.     </div>  

JavaScipt with MVVM Model

  1. var viewModel = kendo.observable({  
  2.         isVisible: true,  
  3.         onchange:function(e)  
  4.         {  
  5.          e.preventDefault();  
  6.             alert("Selected")  
  7.         },  
  8.         products: new kendo.data.DataSource({  
  9.             schema: {  
  10.                 model: {  
  11.                     id: "ProductID",  
  12.                     fields: {  
  13.                         ProductName: { type: "string" },  
  14.                         UnitPrice: { type: "string" }  
  15.                     }  
  16.                 }  
  17.             },  
  18.             batch: true,  
  19.             pageSize: 5,  
  20.             transport: {  
  21.                 read: {  
  22.                     url: "api/Products",  
  23.                     dataType: "json"  
  24.                 },  
  25.                 parameterMap: function (options, operation) {  
  26.                     if (operation !== "read" && options.models) {  
  27.                         return { models: kendo.stringify(options.models) };  
  28.                     }  
  29.                 }  
  30.             }  
  31.         })  
  32.     });  
  33.     kendo.bind($("#example"), viewModel);  
  34.    
 Result in the web browser:
 
 

You can observe from the above result that kendo grid will allow user to select a particular cell through selectable property.

Conculsion

From this article we learned how to handle different events in the kendo grid using jQuery with MVVM Model.

I hope you 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