Question

Ok, let me explain my scenario more clearly:

When a cell is edited, it becomes ‘dirty’ and I style it a certain way by adding a CSS class to the cell via javascript.

Then, if the user Sorts the grid, the styling is lost (I believe because all the rows are recreated) and I need a way to restore the styling to the appropriate cell/row after a Sort.

What I attempted to do is add an entry into data[] called ‘status’ and onCellChange I loop through data[] and match the args.item.Id to appropriate entry in data[].

grid.onCellChange.subscribe(function (e, args) {
    var done = false;
    for (var i = 0; i < data.length && !done; i++) {
        if (data[i].id == args.item.id) {
            data[i].status = "dirty";
            done = true;
        }
    }
}

However, onSort I’m not sure how to match the sorted rows to the data array. (Since I have no args.item) I’ve attempted to do selector statements:
$(“.slick-row”)
to restyle the correct cells, but I have no way to associate the rows with their entry in data[].

Answer 1

1) There is no need to search for the item in your onCellChange handler – it is available at “args.item”.

2) Sorting the “data” array will not wipe out your change to the item in #1.

3) You mention dynamically styling cells. I see no code for that. If your custom formatter is the piece of code that looks at “item.status” and renders it differently if it is dirty, then you don’t have to do anything extra. Sorting the data and telling the grid to re-render will preserve the “dirty” cell styles.