Get Selected Row Values From Kendo Grid On Change Event

转载 于 2017-09-27 09:21:55 发布 · 468 阅读 · 0

本文介绍如何使用Kendo UI Grid通过变更事件获取所选行的数据，并将其绑定到表单以显示详细信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

http://www.c-sharpcorner.com/UploadFile/fc9f65/get-selected-row-values-from-kendo-grid-on-change-event/

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. 

  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-selectable="true"  
  21.                  data-columns="[  
  22.   
  23.                        { 'field': 'ProductName','width':'100px' },  
  24.                     { 'field': ' UnitPrice','width':'100px'},  
  25.                  ]"  
  26.                  data-pageable='true'  
  27.                  data-bind="source:products"  
  28.                  style="height: 300px"></div>  
  29.   
  30.         </div>  
  31.         </div>  
  32. </body>
    </html>
JavaScript with MVVM Model 
  1. $(document).ready(function(){  
  2.   var viewModel = kendo.observable({  
  3.       isVisible: true,  
  4.     
  5.   products: new kendo.data.DataSource({  
  6.           schema: {  
  7.               model: {  
  8.                   id: "ProductID",  
  9.                   fields: {  
  10.                       ProductName: { type: "string" },  
  11.                       UnitPrice: { type: "string" }  
  12.                   }  
  13.               }  
  14.           },  
  15.           batch: true,  
  16.           pageSize: 5,  
  17.   
  18.           transport: {  
  19.               read: {  
  20.                   url: "api/Productsapi",  
  21.                   dataType: "json"  
  22.               },  
  23.               parameterMap: function (options, operation) {  
  24.                   if (operation !== "read" && options.models) {  
  25.                       return { models: kendo.stringify(options.models) };  
  26.                   }  
  27.               }  
  28.           }  
  29.       })  
  30.   
  31.   });  
  32.   kendo.bind($("#example"), viewModel);  
  33.   
  34.     
  35.       })  

Result in browser

   
Now we are going to see how to fetch the selected row details from above grid. To perform this first we need to enable data-selectable property and add the change event in kendo grid as in the following code,

  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="true"  
  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>  
The Change event function script as in the following code,

  1. onchange:function(e)  
  2.       {  
  3.           this.set("selectedRow", e.sender.dataItem(e.sender.select()));                      
  4.       },  

From the above code you can observe that selected data Item in the grid will be set to selectedRow object, Now it’s time to design the form to bind the selected row values from kendo Grid.

The Form Design

  1. div class="form-group" id="TestProduct">  
  2.                 <div class="col-lg-8">  
  3.    
  4.   
  5.   
  6.                     <div class="form-inline k-alt">  
  7.                         <h4 style=>Product Details </h4>  
  8.                     </div>  
  9.                     <div class="form-inline">  
  10.                         <span class="editPageLabel">Product ID:</span>  
  11.                         <span style="color:green" data-bind="text: selectedRow.ProductID"></span>  
  12.                           
  13.                     </div>  
  14.                     <div class="form-inline">  
  15.                         <span class="editPageLabel">Product Name:</span>  
  16.                         <span style="color:green" data-bind="text: selectedRow.ProductName"></span>  
  17.                           
  18.                     </div>  
  19.                     <div class="form-inline">  
  20.                         <span class="editPageLabel">Unit price:</span>  
  21.                         <span style="color:green" data-bind="text: selectedRow.UnitPrice"></span>  
  22.                           
  23.                     </div>  
  24.                     
  25.                 </div>  
  26.                 </div>  
Overall HTML Design 
  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-selectable="true"  
  21.                  data-columns="[  
  22.   
  23.                        { 'field': 'ProductName','width':'100px' },  
  24.                     { 'field': ' UnitPrice','width':'100px'},  
  25.                  ]"  
  26.                  data-pageable='true'  
  27.                  data-bind="source:products, events:{change:onchange}"  
  28.                  style="height: 300px"></div>  
  29.   
  30.         </div>  
  31.   
  32.           
  33.   
  34.          
  35.             <div class="form-group" id="TestProduct">  
  36.                 <div class="col-lg-8">  
  37.    
  38.   
  39.   
  40.                     <div class="form-inline k-alt">  
  41.                         <h4 style=>Product Details </h4>  
  42.                     </div>  
  43.                     <div class="form-inline">  
  44.                         <span class="editPageLabel">Product ID:</span>  
  45.                         <span style="color:green" data-bind="text: selectedRow.ProductID"></span>  
  46.                           
  47.                     </div>  
  48.                     <div class="form-inline">  
  49.                         <span class="editPageLabel">Product Name:</span>  
  50.                         <span style="color:green" data-bind="text: selectedRow.ProductName"></span>  
  51.                           
  52.                     </div>  
  53.                     <div class="form-inline">  
  54.                         <span class="editPageLabel">Unit price:</span>  
  55.                         <span style="color:green" data-bind="text: selectedRow.UnitPrice"></span>  
  56.                           
  57.                     </div>  
  58.                     
  59.                 </div>  
  60.                 </div>  
  61.        
  62.   
  63.   
  64.     </div>  
  65. </body>  
  66. </html>  
JavaScript with MVVM pattern
  1. $(document).ready(function(){  
  2.    var viewModel = kendo.observable({  
  3.        isVisible: true,  
  4.   
  5.        onchange:function(e)  
  6.        {  
  7.            this.set("selectedRow", e.sender.dataItem(e.sender.select()));  
  8.   
  9.        },  
  10.        products: new kendo.data.DataSource({  
  11.            schema: {  
  12.                model: {  
  13.                    id: "ProductID",  
  14.                    fields: {  
  15.                        ProductName: { type: "string" },  
  16.                        UnitPrice: { type: "string" }  
  17.                    }  
  18.                }  
  19.            },  
  20.            batch: true,  
  21.            pageSize: 5,  
  22.   
  23.            transport: {  
  24.                read: {  
  25.                    url: "api/Productsapi",  
  26.                    dataType: "json"  
  27.                },  
  28.                parameterMap: function (options, operation) {  
  29.                    if (operation !== "read" && options.models) {  
  30.                        return { models: kendo.stringify(options.models) };  
  31.                    }  
  32.                }  
  33.            }  
  34.        })  
  35.   
  36.    });  
  37.    kendo.bind($("#example"), viewModel);  
  38.   
  39.      
  40.        })  
Result in Browser
 
 
Hope you have enjoyed this article.

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值