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">
  17. <div id="test-grid" data-role="grid"
  18. data-scrollable="true"
  19. data-editable="false"
  20. data-columns="[
  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>
  29. </div>
  30. </div>
  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">
  4. <div id="test-grid" data-role="grid"
  5. data-scrollable="true"
  6. data-editable="false"
  7. data-columns="[
  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>
  16. </div>
  17. </div>

JavaScipt with MVVM Model

  1. var viewModel = kendo.observable({
  2. isVisible: true,
  4. OnDataBinding:function()
  5. {
  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">
  4. <div id="test-grid" data-role="grid"
  5. data-scrollable="true"
  6. data-editable="false"
  7. data-columns="[
  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>
  16. </div>
  17. </div>
JavaScipt with MVVM Model
  1. var viewModel = kendo.observable({
  2. isVisible: true,
  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">
  4. <div id="test-grid" data-role="grid"
  5. data-scrollable="true"
  6. data-editable="false"
  7. data-columns="[
  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>
  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">
  4. <div id="test-grid" data-role="grid"
  5. data-scrollable="true"
  6. data-editable="false"
  7. data-selectable="multiple cell"
  8. data-columns="[
  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>
  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!