SlickGrid styling after cell edit

Question

I'm using SlickGrid (2.0) dataView with slick.editors. In the Grid, a user can edit any number of cells which then modifies the underlying grid data so that the edits are maintained when the grid scrolls. This works great. But I also want to provide visual feedback for all the edits since these are not saved to the database until user hit "Save Edits" button.

Problem is that the editor method resets the cell after it reads back the changed grid data. I need to maintain a background color change to indicate that it's been edited. Has anyone been able to do this?

Here is the relevent code (simple Integer editor):

function IntegerCellEditor(args) {
    var $input;
    var defaultValue;
    var scope = this;
    this.init = function() {
        $input = $("<input type=text class='edited' type=text style='font:normal 12px arial; width:95px; text-align:right; border:none;' />");
        $input.bind("keydown.nav", function(e) {
            if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                e.stopImmediatePropagation();
            }
        });
    $('#saveChanges').removeAttr("disabled");   // remove disabled attribute from "Save Changes" btn
        $input.appendTo(args.container);
        $input.focus().select();
    };
    this.destroy = function() {
        $input.remove();
    };
    this.focus = function() {
        $input.focus();
    };
    this.loadValue = function(item) {
        defaultValue = item[args.column.field];
        $input.val(defaultValue);
        $input[0].defaultValue = defaultValue;
        $input.select();
    };
    this.serializeValue = function() {
        return parseInt($input.val(),10) || 0;
    };
    this.applyValue = function(item,state) {
        item[args.column.field] = state;
    };
    this.isValueChanged = function() {
        return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
document.getElementsByClassName('ui-widget-content slick-row')[row].className += 'edited';
        };
        this.validate = function() {
            if (isNaN($input.val()))
                return {
                   valid: false,
                   msg: "Please enter a valid integer"
               };
            return {
                valid: true,
                msg: null
           };
        };
        this.init();
    }

This line does nothing and I can't figure out how to do this:

document.getElementsByClassName('ui-widget-content slick-row')[row].className += 'edited';

Thanks

Answer 1

I am not an expert in SlickGrid but take a look a Example 14, I think it has similar information that would help you.

My idea would be something like:

• subscribe to grid.onCellChange event
• store changes in object
• use grid.setCellCssStyles('highlight',changes) to update CSS or grid.addCellCssStyles

Hope that helps a little at least.