Excel like behavior with SlickGrid

Question

I'd like to mimic a particular behavior of spreadsheets with SlickGrid. The user:

1. clicks on a cell to activate it
2. enters =sum(, or whatever formula,
3. the original cell address is saved
4. the user selects the cell range (I assume that the original cell closes the editor)
5. focus is returned to the original cell with the new cell range appended. i.e. =sum(r1c1,r2c2).

What's throwing me off is the need to change focus.

var cell_with_formula = null;
grid = new Grid($("#myGrid"), data, columns, options);

// save original cell address, but there is no onBlur event
grid.onBlur = function(args){
  cell_with_formula = args; // save address
}; 

grid.onCellRangeSelected = function(){
  if(cell_with_formula){
    // check if cell_with_formula has `=` at begining
    // if so, append selected range    
    cell_with_formula = null;
  }
}; 

Thanks in advance!

Answer 1

This is not possible in SlickGrid 1.4.x, but is going to be supported in the version 2.0 that is currently still under active development. The alpha is hosted in a separate branch on GitHub - https://github.com/mleibman/SlickGrid/tree/v2.0a, and I just checked in preliminary code that supports this with an example. Please see https://github.com/mleibman/SlickGrid/commit/17b1bb8f3c43022ee6aec89dcab185cd368b8785.

Here's a basic formula editor implementation:

function FormulaEditor(args) {
    var _self = this;
    var _editor = new TextCellEditor(args);
    var _selector;

    $.extend(this, _editor);

    function init() {
        // register a plugin to select a range and append it to the textbox
        // since events are fired in reverse order (most recently added are executed first),
        // this will override other plugins like moverows or selection model and will
        // not require the grid to not be in the edit mode
        _selector = new Slick.CellRangeSelector();
        _selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected);
        args.grid.registerPlugin(_selector);
    }

    this.destroy = function() {
        _selector.onCellRangeSelected.unsubscribe(_self.handleCellRangeSelected);
        grid.unregisterPlugin(_selector);
        _editor.destroy();
    };

    this.handleCellRangeSelected = function(e, args) {
        _editor.setValue(_editor.getValue() + args.range);
    };


    init();
}