剑道网格可编辑高亮颜色

Question

I had this kendo demo here , want I to achieve, highlighted color only appear once on edited row. Currently the highlighted color appear duplicate when I edit multiple row. How to fixed this? Appreciate your help.

DEMO

Answer 1

When you already modify it that way, you can reset color by row index, if its even set it to gray if its odd set it to white and set it to blue if modified:

function highlightBlue() {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource.data();

    $.each(data, function (i, row) {
        var item = $('tr[data-uid="' + row.uid + '"]');
        if (item[0].rowIndex % 2 !== 0) {
            item.css("background-color", "#f6f6f6");
        } else {
            item.css("background-color", "white");
        }
        if (row.Modified == "Y") {
            item.css("background-color", "#64B5F6");
        }
    });
}

Your modified version: highlight row

EDIT:

To make it easier you can add class on cell select and remove class on cell close.

<style>
    .highlight {
      background-color: red !Important;
    }
</style>
.....
edit: function(e){
    $(e.container[0]).closest("tr").addClass("highlight");
},
cellClose: function(e) {
    $(e.container[0]).closest("tr").removeClass("highlight");
}

With this way we preserve the background colors, here is updated code: On cell open and close