Programatically click on cell in ui-grid to get into deep edit

Question

On beginCellEdit in ui-grid, I would like to programatically click on the cell to get into deep edit. Is there a method that would let me do this in the beginCellEdit eventhandler ?

My beginCellEdit is shown below.

 gridApi.edit.on.beginCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {

//method to invoke the click action

});

Please let me know.

Answer 1

Deep edit is initiated by clicking on the cell that is already in edit mode.

This will be a dirty workaround at best, but it appears to work.

You will need a piece of code from this answer, plus a way to get the element you want to click. I have ui-grid-cellNav enabled, so my cell has class: 'ui-grid-cell-focus' Also i'm using jQuery since i have it loaded anyway.

$('.ui-grid-cell-focus').parent().find('form').children()[0]

I select the cell, then i get its parent, find a form element inside it and select the first child element inside that in hopes it'll work with more than just plain input boxes.

Here is the whole thing.

function eventFire(el, etype) {
    if (el.fireEvent) {
        (el.fireEvent('on' + etype));
    } else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false);
        el.dispatchEvent(evObj);
    }
} 

$scope.gridOptions.onRegisterApi = function (gridApi) {
    gridApi.edit.on.beginCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
        eventFire($('.ui-grid-cell-focus').parent().find('form').children()[0], 'click');
    });
};