Persist Applied Custom Styles when Editing is Canceled in Grid
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Description
If I set a custom background color on each row, based on specific rules it works great, except for when I try to edit the row and then decide to cancel the editing, by pressing the Cancel
button. When the editing mode is 'popup' or' inline' the applied custom styles disappear.
How can I preserve the appearance even when the editing is canceled?
Solution
The observed behavior is due to that the row re-renders once the Cancel
button is clicked, thus the classes added in the databound
event handler are cleared. To have the same styles applied after the Cancel
button is clicked you can:
- Handle the
cancel
event of the Grid. - In the event handler, you can check if a custom class is applied, retrieve it and apply it again.
<style>
.custom1{
background-color: pink !important;
}
.custom2{
background-color: lightblue !important;
}
.custom3{
background-color: yellow !important;
}
</style>
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://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,
pageSize: 20,
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 } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
dataBound: function(e){
var grid = e.sender;
for (var j = 0; j < grid.tbody.children().length; j++)
{
var row = $(grid.tbody.children()[j]);
$(row).addClass('custom'+j)
}
},
cancel: function(e) {
var classes = $('tr[data-uid="'+e.model.uid+'"]').attr('class').split(' ').length;
var lastClass = $('tr[data-uid="'+e.model.uid+'"]').attr('class').split(' ').pop();
setTimeout(function(){
$('tr[data-uid="'+e.model.uid+'"]').addClass(lastClass)
})
},
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px"},
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
</script>