SlickGrid - Editable Grid with Controls Visible by default

Question

The SlickGrid supports editors for a cell that can be configured to be displayed on click or double click. However I don't see an option where, the editor is VISIBLE by default for all cells without having to click/double click on the cell.

Is it possible to support editors in slick grid where the editors are "init" by default for all cells?
Is there a known workaround?

Thank you.

score 2 · Answer 1 · answered Jan 24 '12 at 08:23

I know it's not exactly what you asked for, but I thought I'd add the code below in case anyone finds it useful. It's a semi-workaround and it at least lets the user navigate around the grid and start typing in the cell to edit, without having to "initialise" the edit first by pressing Enter or double-clicking the cell; a bit like editing an MS Excel sheet.

myGrid.onKeyDown.subscribe(function (e, args) {
  var keyCode = $.ui.keyCode,
      col,
      activeCell = this.getActiveCell();

  /////////////////////////////////////////////////////////////////////
  // Allow instant editing like MS Excel (without presisng enter first
  // to go into edit mode)
  if (activeCell) {
    col = activeCell.cell;

    // Only for editable fields and not if edit is already in progress
    if (this.getColumns()[col].editor && !this.getCellEditor()) {
      // Ignore keys that should not activate edit mode
      if ($.inArray(e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP,
                               keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
                               keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK,
                               keyCode.HOME, keyCode.END, keyCode.INSERT,
                               keyCode.TAB, keyCode.ENTER]) === -1) {
        this.editActiveCell();
      }
    }
  }
}

Hi Njr, Not exactly what we want but yes it is interesting. Thanks for sharing this. We may be able to put it to good use on some other project. — Y123, Jan 24 '12 at 18:39

score 1 · Answer 2 · answered May 21 '13 at 14:20

Below is what I ended up with (improved version njr101's answer) to make this work. I've added a check for CTRL key so it doesn't break the copy paste plugin I use on the grid.

function (e) {
var keyCode = $.ui.keyCode,
    col,
    activeCell = this.getActiveCell(),
    activeCellNode = this.getActiveCellNode();

var isInEditMode = $(activeCellNode).hasClass("editable");

if (activeCell && !isInEditMode) {
    col = activeCell.cell;

    if (this.getColumns()[col].editor  && !e.ctrlKey) {
        if ($.inArray(e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP,
            keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
            keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK,
            keyCode.HOME, keyCode.END, keyCode.INSERT,
            keyCode.TAB, keyCode.ENTER]) === -1) {

            this.editActiveCell();
        }
    }
}

};

and dont forget to subscribe:

slickGrid.onKeyDown.subscribe();

score 1 · Accepted Answer · answered Jan 24 '12 at 01:47

1

No. The grid is designed to have one cell editable at a time.

answered Jan 24 '12 at 01:47

Tin

9,082
2
34
32

Thank you Tin for the response... I am currently trying out a solution to simulate a Formatter as a Editor - Bit more complex than needed but I guess it should do the trick. – Y123 Jan 24 '12 at 01:58
1

Just make sure you don't attach any event listeners to the DOM generated by SlickGrid directly or modify it externally in any way. SlickGrid destroys and recreates row nodes as you scroll. Use events provided by the grid or listen on a container (i.e. use event delegation). – Tin Jan 24 '12 at 02:12
Sure thanks Tin, we actually learnt some of this the hard way... Since we needed to associate the events with some of the DOM Nodes. We may have to execute some sorry workarounds for this. We opened a feature request for DOM Support in Formatter's return value, and I believe it is coming back to you on the GitHib site :D I am not sure if the recommendation is 100% possible, but we have raised a ticket (Feature Request). Ticket: https://github.com/mleibman/SlickGrid/issues/269 – Y123 Jan 24 '12 at 18:58

score 0 · Answer 4 · answered Oct 01 '15 at 08:22

Update to use editor define in row metadata and not in column definition.

In my case, one row of two contains in cell 1 text editor and one row of two contains nothing.

    grid.onKeyDown.subscribe( function ( e, args ) {
        var keyCode = $.ui.keyCode;
        var activeCell = this.getActiveCell();

        if( activeCell ) {

            // get metadata
            var columnDefinition = grid.getColumns()[ activeCell.cell ];
            var rowMetadata = dataView.getItemMetadata && dataView.getItemMetadata( activeCell.row );
            var rowColMetadata = rowMetadata && rowMetadata.columns;
            rowColMetadata = rowColMetadata && ( rowColMetadata[ columnDefinition.id ] || rowColMetadata[ activeCell.cell ] ); 

            if ( rowColMetadata && rowColMetadata.editor && !this.getCellEditor() ) {

                if( $.inArray( e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP, keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
                                       keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK, keyCode.HOME, keyCode.END, keyCode.INSERT,
                                       keyCode.TAB, keyCode.ENTER]) === -1 ) {
                    this.editActiveCell();
                }
            }
        }
    });

SlickGrid - Editable Grid with Controls Visible by default

4 Answers4

Linked