CODEWITHSUNDEEP
stylingslickgrid
HeiN
HeiN

Reputation: 503

Add Css style to edited cell in slickgrid

I'm just a beginner and I couldn't figure it out how to add a css class to edited cell in slickgrid. I've searched and didn't get the answer.

I've got these steps to do:

Could somebody provide the sample code for this?

Upvotes: 0

Views: 7718

Answers (1)

Nan Zou
Nan Zou

Reputation: 319

I implemented this exactly as suggested in the first referenced link. The second argument passed to SlickGrid.setCellCssStyles() is a hash keyed by row numbers, with the value being another hash keyed by column id and its value being the css class.

The code as follows:

<style type="text/css">
    .slick-cell-modified {
        background-color: yellow;
    }
</style>

<script>
    var modifiedCells = {};
    grid.onCellChange.subscribe(function (e, args) {
        if (!modifiedCells[args.row]) {
            modifiedCells[args.row] = {};
        }
        modifiedCells[args.row][this.getColumns()[args.cell].id] = "slick-cell-modified";
        this.setCellCssStyles("modified", modifiedCells);
        // ...update data view
    });
</script>

Be sure to clear the cell css style after saving so the highlighted style don't stick around.

function saveChanges() {
    // ...
    grid.removeCellCssStyles("modified");
    modifiedCells = {};
}

Upvotes: 3

Related Questions