Unable to set focus on and edit a cell in slick grid

Question

I am using slick grid. On top of the grid, we have a text box. When user enters a value in textbox and tabs out, we need to enter a new row into the grid.

This is how the code looks:

gridOptions = {

            useCheckBoxField: 'selected',
            data: 'data',
            columns: 'columns',
            enableCellNavigation: true,
            enableColumnReorder: true,
            editable: true,
            autoEdit: true,
            multiColumnSort: true,
            rowSelectionModel: 'selectedRows',
            enableAddRow: true
        }

This is how the first column looks which I am trying to edit.

{id: 'id', name: 'id', field: 'id', editor: Slick.Acsiom.Editors.Text, sortable: true, width: 210, minWidth: 100},

This is the code to enter new row and then make the first cell editable and set the focus on the cell.

var d =  $scope.$grid.grid.getData();
               $scope.$grid.grid.invalidateRow(d.length);
               //Adds the new row as the first row.
               d.unshift(item);
               $scope.$grid.grid.updateRowCount();
               $scope.$grid.grid.setData(d);
                   $scope.selectedRows = [];
                   $scope.selectedRows = [0];

               //Sets the first row and first column as editable
               $scope.$grid.grid.setActiveCell($scope.selectedRows,0);
               $scope.$grid.grid.gotoCell(0,0,true);

Problem: Everything works fine, except the cell remains uneditable. User has to manually click on cell to edit it. How can I make the cell editable as soon as a row is added?

If .editActiveCell isn't working, we might need a jsbin/working example of the issue to see what is interfering with making the cell editable. — kavun
The solutions provided by others using editActiveCell() should give the desired result. A quick mock-up of them in action can be seen in this plnkr, just click the 'Edit Cell' button. If this does not work then perhaps the issue is with the code in the custom editor Slick.Acsiom.Editors.Text. A plnkr / fiddle replicating the issue is required to determine what the issue is. — Chris C

kavun kavun · Accepted Answer · 2015-10-21T15:54:54

Use grid.editActiveCell - see more here https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-editActiveCell

After setting active cell, make it editable.

var grid = $scope.$grid.grid;
var row = $scope.selectedRows[0];
var col = 0;
grid.setActiveCell(row, col);
grid.editActiveCell(Slick.Acsiom.Editors.Text);

Unable to set focus on and edit a cell in slick grid

2 Answers