I will use the following REST service to explain how to get selected row values from kendo grid on change event REST service end point: api/productsapi.
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/productsapi service response in POSTMAN as in the following 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.
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
- <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
- <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
- <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
- <title></title>
- </head>
- <body>
- <div class="container" id="example">
- <div class="row">
- <div id="test-grid" data-role="grid"
- data-scrollable="true"
- data-editable="false"
- data-selectable="true"
- data-columns="[
- { 'field': 'ProductName','width':'100px' },
- { 'field': ' UnitPrice','width':'100px'},
- ]"
- data-pageable='true'
- data-bind="source:products"
- style="height: 300px"></div>
- </div>
- </div>
- </body></html>
JavaScript with MVVM Model
Arul RPosted Jan 17, 2016, 10:50 AM
Thanks for nice article
Harshad PansuriyaPosted Dec 11, 2015, 7:10 AM
Nice one
Muhammad Aqib ShehzadPosted Dec 11, 2015, 5:13 AM
nice one dear
Raja TPosted Dec 10, 2015, 4:41 AM
Nice, Thanks for sharing
Humayun Kabir MamunPosted Dec 10, 2015, 4:10 AM
Nice...
Sibeesh VenuPosted Dec 10, 2015, 12:29 AM
Nice Share