Angular UI-grid edit cell on Click button

Question

I am using Angular along with UI-Grid (http://ui-grid.info/)

I have setup the Grid using the options below

this.mdGridLogOptions.gridOptions= {
enableSorting: false,
enableColumnMenus: false,
enableAutoFitColumns: false,
paginationPageSizes: [25, 50, 100, 200, 500],
enableFiltering: true,
enableGridMenu: false,
enableCellEditOnFocus: true,
columnDefs: [
    { 
field: 'override_date',enableCellEdit:true,
displayName: 'PROMISE DATE', type: 'date', 
cellFilter: 'date:"MMM-dd-yyyy"', 
cellTemplate:'<div class="ui-grid-cell-contents" layout="row" layout-align="space-between end"><div>{{COL_FIELD CUSTOM_FILTERS}}</div><div ng-click="grid.appScope.clickHandler()" class="material-icons md-light">event</div></div>', 
editableCellTemplate: '<div uigriddatepicker ng-class="colt + col.uid"></div>'}}

The field shows properly as below. I have couple of problems

Only Double Click works for editing the field. I understand editcellonfocus is an option but its not working as intended since i am unable to disable double click
I want to start the edit process by clicking the calendar button and disable the double click button. is there BEGINEDIT firing event for the parent cell?

Arntor Arntor · Accepted Answer · 2018-03-15T11:38:16

I wanted to do the same thing today, it appears there is no "normal" way to do this, you need to simulate the "dblclick" event on the cell that you need to start editing.

So first in your cellTemplate you need to send the "row" as a parameter to the click handler function.

 ng-click="grid.appScope.clickHandler(row)"

later in the clickHandler you need to find out the index of the clicked row and then get the html element of the cell the you want to start editing.

  scope.clickHandler = function(row){
    // this is a hack to make possible editing on cell by button click
    // get the row index of the clicked element
    var rowIndex = row.grid.renderContainers.body.visibleRowCache.indexOf(row);
    // then get the jqLite element of the cell that needs to be edited
    var el = angular.element(document.querySelectorAll('.ui-grid-row')[rowIndex].children[0].children[0]);
    // simulate double click on the cell to start editing
    el.triggerHandler('dblclick');
  };

Angular UI-grid edit cell on Click button

2 Answers