How to commit changes in a cell from code in slickgrid

Question

I have used custom formatter and editor in slickgrid, which is simply checkbox angular directive. I am using twice the directive, once for formatter, and once for editor. Formatter and Editors are served from angular service. Slickgrid itself is wrapped into an angular directive.

Editors are implemented according to slickgrid doc Writing custom editors

The slickgrid directive is used in several places. One scenario, which I am struggling with, is when there is a grid, and there are buttons outside of grid.

When one clicks one of this button, I have to get the values from cells/editors.

When grid is rendered, once sees checkbox. it is checked/unchecked based on current value of a cell where this formatter is used.

And when one clicked on a cell with checkbox, the checkbox changes from unchecked to checked or vice versa. And then one clickes somewhere else in the grid in the value of editor checkbox copied to cell, and then formatter shows checked/unchecked.

Back to my scenario: when one checkes/unchecks checkbox in editor mode, and directly clickes one of the buttons outside grid, the value of editor is not applied yet to cell, thus the wrong value is send. While we are still in editor mode, and value is not committed.

Now the question, how to commit changes to cell right after the value of checkbox is changed dynamically without waiting for slickgrid to change from editor mode to formatter mode?

Found this question relative, but my environment is not the same.

I found that editor takes args argument which has commitChanges() method, but how to use it?

Best

Answer 1

I have tried a lot of methods of slickgrid, but did not find a better solution but this.

Inside my custom Editor constructor, I have added a watcher that watches changes to checked attribute of Checkbox directive.

$timeout(function () {
        controlScope.$watch('checked', function () {
            $timeout(function() {
                args.grid.getEditController().commitCurrentEdit();
                args.grid.resetActiveCell();

            });

        });
    });

The first timeout is not to break the running digest cycle, and just digest it on next run.

And the next timeout is needed to wait until angular is finished with changing scope, and only then commit changes. Otherwise the commitCurrentEdit() will kill the editor, and thus the scope of Checkbox directive.

I hope there will be a better solution.

1 EDIT: This solution brings weird behavior. The first click works good, but the next click on the same cell does not change the checkbox checked.

2 EDIT: I have added resetActiveCell() of grid to leave the focus of active cell, and now it works as I wanted.

3 EDIT: We could not find a better solution without changing the source code of Slickgrid, which is not wished. After searching alternatives and solution for the problem, we decided to use the ui.grid and it plays well with our environment , since we are using angular. And most of the problem we faced with slickgrid, is by default fixed just by using ui.grid without customization. Slickgrid is still of the best grids available for javascript developers, but it seems like it is slowing down from JavaScript progress.