4 Answers, 1 is accepted
You can use the Grid persistSelection setting to maintain the rows selected state between Grid rebinds. Here is an example with this setting enabled:
https://dojo.telerik.com/AZUlEzil
Note that this setting requires that you set an id field for your data, like this:
schema: {
model: {
id:
"ProductID"
,
fields: {
ProductName: { type:
"string"
},
UnitPrice: { type:
"number"
},
UnitsInStock: { type:
"number"
},
Discontinued: { type:
"boolean"
}
}
}
}
The Grid uses the unique values of this field to store the selected items between data changes.
Regards,
Tsvetina
Progress Telerik
Hi, I am using PersistSelection with an Id of type String. Still checkbox selections are not retained after drag and drop of grid row. Please find the code below.
var grid = $("#GridData").kendoGrid({
dataSource: {
transport: {
read: {
url: "/Dashboard/GetValues"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "string" },
Name: { type: "string" },
Age: { type: "number" },
Value: { type: "number" },
MRT: { type: "number" },
YRT: { type: "number" }
}
}
}
},
scrollable: false,
persistSelection: true,
columns: [
{
field: "Id",
title: "<input id='checkAll', type='checkbox', class='check-box' />",
template: "<input type=\"checkbox\" class=\"checkbox\" data-id='#= Id#' />",
},
{
field: "Name",
title: "Name",
template: "<a href='javascript:void(0);' data-measureid='#= Id#' > #=Name# </a>",
},
{
field: "Age",
title: "Age",
},
{
field: "Value",
title: "Value",
},
{
field: "MRT",
title: "MRT",
},
{
field: "YRT",
title: "YRT",
},
],
dataBound: function () {
$("#checkAll").change(function () {
if (this.checked) {
$('#checkAll').attr('checked', 'checked');
var elements = document.getElementsByClassName("checkbox");
for (i = 0; i < elements.length; i++) {
elements[i].checked = true;
$(elements[i]).addClass("checkbox-selection");
}
}
else if (!this.checked) {
$('#checkAll').prop('checked', false);
var elements = document.getElementsByClassName("checkbox");
for (i = 0; i < elements.length; i++) {
elements[i].checked = false;
$(elements[i]).removeClass("checkbox-selection");
}
}
});
$(".checkbox").bind("click", function () {
if (this.checked) {
$(this).parent().addClass("checkbox-selection");
}
else {
$(this).removeClass("checkbox-selection");
}
var lenghtOfUnchecked = $('.checkbox:checkbox:not(:checked)').length;
if (lenghtOfUnchecked > 0) {
$('#checkAll').prop('checked', false);
}
else if (lenghtOfUnchecked === 0) {
$('#checkAll').prop('checked', true);
}
});
}
}).data("kendoGrid");
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: $.noop,
cursor: "move",
placeholder: function (element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: "#GridData tbody",
change: function (e) {
newIndex = e.newIndex,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
$('#checkAll').prop('checked', false);
}
});
});
I see now that your Grid uses custom checkbox selection. The persistSelection property works only with the built-in checkbox selection of the Grid, as demonstrated in this demo:
Grid / Checkbox selection
Is there a specific reason why you do not use the built-in selection? If it is not possible to switch to it, you will need to manually persist the selected items like shown in this example:
Persist Row Selection during Data Operations
Instead of using the Grid change event, you will need to save the selected row IDs inside your custom selection event handlers.
Regards,
Tsvetina
Progress Telerik