Get the Data of the Last Selected Grid Row
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Product Version | Tested up to version 2017.2 621 |
Description
How can I get the data item of the last selected row by using the checkbox selectable column in the Kendo UI Grid?
Solution
To get the dataItem for the last selected row:
- Subscribe for the
clickevent of the checkboxes by using a jQuery selector. - In the
clickevent handler, get the row by using theclosestjQuery method. - Get the row data by using the
dataItemmethod of the Grid.
<div id="example">
<div id="grid"></div>
<script>
function onClick(e) {
var grid = $("#grid").data("kendoGrid");
var row = $(e.target).closest("tr");
var dataItem = grid.dataItem(row);
if(row.hasClass("k-selected")){
console.log("Deselecting");
}else{
console.log("Selecting");
}
console.log(dataItem);
};
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
pageSize: 10,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
schema: {
model: {
id: "ProductID"
}
}
},
pageable: true,
scrollable: false,
persistSelection: true,
sortable: true,
columns: [{
selectable: true,
width: "50px"
},
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}"
},
{
field: "UnitsInStock",
title: "Units In Stock"
},
{
field: "Discontinued"
}
]
});
var grid = $("#grid").data("kendoGrid");
grid.tbody.on("click", ".k-checkbox", onClick);
});
</script>
</div>
Notes
The checkbox selectable column is available as of the Kendo UI R2 2017 SP1 release.