Persist Focused Grid Cells after Rebind
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Operating System | All |
Browser | All |
Browser Version | All |
Description
How can I persist a focused cell in the Kendo UI Grid for jQuery after rebind?
Solution
The following example demonstrates how to persist a focused Grid cell after rebinding.
The demo implies the usage of incell editing, built-in keyboard navigation, and the autoSync:true
configuration for the Grid DataSource instance.
The functionality relies on the following milestones:
- The
navigatable
option is set totrue
. - The
editable
option is set totrue
or theeditable.mode
option is set to"incell"
. - The
dataBinding
event handler of the Grid is used to obtain thecurrent
Grid cell and its corresponding row and cell indexes. - The saved row and cell indexes are applied through the
current()
method in thedataBound
event handler. - The
table
option of the Grid can be focused explicitly if the user has clicked on the Save Changes button—this requires you to set a flag in thesaveChanges
event handler.
Generally, it is uncommon to enable the autoSync
option for the incell editing because it greatly increases the amount of update-related remote requests. Nevertheless, it is possible for you to use such an approach if required.
<div id="grid"></div>
<script>
$(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
autoSync: true,
pageSize: 5,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
var rowIndex = null;
var cellIndex = null;
var saveButtonClicked = false;
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 300,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true,
saveChanges: function(e) {
saveButtonClicked = true;
},
dataBinding: function(e) {
var current = e.sender.current() || [];
if (current[0]) {
cellIndex = current.index();
rowIndex = current.parent().index();
}
},
dataBound: function(e) {
if (!isNaN(cellIndex)) {
e.sender.current(e.sender.tbody.children().eq(rowIndex).children().eq(cellIndex));
rowIndex = cellIndex = null;
// The code below is needed only when the user clicks on the "Save Changes" button.
// Otherwise, focusing the table explicitly and unconditionally can steal the page focus.
if (saveButtonClicked) {
e.sender.table.focus();
saveButtonClicked = false;
}
}
}
});
});
</script>