Get Selected Row Values From Kendo Grid On Change Event
2017-09-27 09:21
471 查看
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.
<!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
$(document).ready(function(){
var viewModel = kendo.observable({
isVisible: true,
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "string" }
}
}
},
batch: true,
pageSize: 5,
transport: {
read: {
url: "api/Productsapi",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
});
kendo.bind($("#example"), viewModel);
})
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,
<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, events:{change:onchange}"
style="height: 300px"></div>
</div>
</div>
The Change event function script as in the following code,
onchange:function(e)
{
this.set("selectedRow", e.sender.dataItem(e.sender.select()));
},
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
div class="form-group" id="TestProduct">
<div class="col-lg-8">
<div class="form-inline k-alt">
<h4 style=>Product Details </h4>
</div>
<div class="form-inline">
<span class="editPageLabel">Product ID:</span>
<span style="color:green" data-bind="text: selectedRow.ProductID"></span>
</div>
<div class="form-inline">
<span class="editPageLabel">Product Name:</span>
<span style="color:green" data-bind="text: selectedRow.ProductName"></span>
</div>
<div class="form-inline">
<span class="editPageLabel">Unit price:</span>
<span style="color:green" data-bind="text: selectedRow.UnitPrice"></span>
</div>
</div>
</div>
Overall HTML Design
<!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, events:{change:onchange}"
style="height: 300px"></div>
</div>
<div class="form-group" id="TestProduct">
<div class="col-lg-8">
<div class="form-inline k-alt">
<h4 style=>Product Details </h4>
</div>
<div class="form-inline">
<span class="editPageLabel">Product ID:</span>
<span style="color:green" data-bind="text: selectedRow.ProductID"></span>
</div>
<div class="form-inline">
<span class="editPageLabel">Product Name:</span>
<span style="color:green" data-bind="text: selectedRow.ProductName"></span>
</div>
<div class="form-inline">
<span class="editPageLabel">Unit price:</span>
<span style="color:green" data-bind="text: selectedRow.UnitPrice"></span>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript with MVVM pattern
$(document).ready(function(){
var viewModel = kendo.observable({
isVisible: true,
onchange:function(e)
{
this.set("selectedRow", e.sender.dataItem(e.sender.select()));
},
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "string" }
}
}
},
batch: true,
pageSize: 5,
transport: {
read: {
url: "api/Productsapi",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
});
kendo.bind($("#example"), viewModel);
})
Result in Browser
Hope you have enjoyed this article.
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
$(document).ready(function(){
var viewModel = kendo.observable({
isVisible: true,
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "string" }
}
}
},
batch: true,
pageSize: 5,
transport: {
read: {
url: "api/Productsapi",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
});
kendo.bind($("#example"), viewModel);
})
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,
<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, events:{change:onchange}"
style="height: 300px"></div>
</div>
</div>
The Change event function script as in the following code,
onchange:function(e)
{
this.set("selectedRow", e.sender.dataItem(e.sender.select()));
},
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
div class="form-group" id="TestProduct">
<div class="col-lg-8">
<div class="form-inline k-alt">
<h4 style=>Product Details </h4>
</div>
<div class="form-inline">
<span class="editPageLabel">Product ID:</span>
<span style="color:green" data-bind="text: selectedRow.ProductID"></span>
</div>
<div class="form-inline">
<span class="editPageLabel">Product Name:</span>
<span style="color:green" data-bind="text: selectedRow.ProductName"></span>
</div>
<div class="form-inline">
<span class="editPageLabel">Unit price:</span>
<span style="color:green" data-bind="text: selectedRow.UnitPrice"></span>
</div>
</div>
</div>
Overall HTML Design
<!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, events:{change:onchange}"
style="height: 300px"></div>
</div>
<div class="form-group" id="TestProduct">
<div class="col-lg-8">
<div class="form-inline k-alt">
<h4 style=>Product Details </h4>
</div>
<div class="form-inline">
<span class="editPageLabel">Product ID:</span>
<span style="color:green" data-bind="text: selectedRow.ProductID"></span>
</div>
<div class="form-inline">
<span class="editPageLabel">Product Name:</span>
<span style="color:green" data-bind="text: selectedRow.ProductName"></span>
</div>
<div class="form-inline">
<span class="editPageLabel">Unit price:</span>
<span style="color:green" data-bind="text: selectedRow.UnitPrice"></span>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript with MVVM pattern
$(document).ready(function(){
var viewModel = kendo.observable({
isVisible: true,
onchange:function(e)
{
this.set("selectedRow", e.sender.dataItem(e.sender.select()));
},
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "string" }
}
}
},
batch: true,
pageSize: 5,
transport: {
read: {
url: "api/Productsapi",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
});
kendo.bind($("#example"), viewModel);
})
Result in Browser
Hope you have enjoyed this article.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- How to get the data from a cell when I click on the GridButtonColumn of the same row
- How to get the Values of Selected Row from a Gridview using ASP.NET
- How to get DataKey, RowIndex or Row from a GridView row event
- [转] easyui 获取数据表格中选中行的数据 Get selected row data from...
- easyui 获取数据表格中选中行的数据 Get selected row data from...
- easyui 获取数据表格中选中行的数据 Get selected row data from...
- Selenium2Library系列 keywords 之 _SelectElementKeywords 之 get_selected_list_values(self, locator)
- system setting manager, save or get system values from database
- java.lang.IllegalStateException: get field slot from row 0 col -1 failed
- RadGrid Expand/Collapse on Row click
- illegalstateexception:get field slot from row 0 col -1 failed
- java.lang.IllegalStateException: get field slot from row 0 col -1 failed 异常错误
- cannot change DocValues type from SORTED_SET to NUMERIC for field xxx
- 网上 eventObserver 示例 onchange 方法会多次调用
- How to get the RGB values for a pixel on an image on the iphone
- Rad:Grid Change Row BackGround Color (RadGrid)
- A issue related to "incorect SelectedIndex when remove a row from DataGrid"
- mysql query to find the maximum 3 values from a column and group by on other column
- [转]How to get return values and output values from a stored procedure with EF Core?
- How to Capture the Row Selected on Search Page In a Variable?