CODEWITHSUNDEEP
angularjsangular-ui-gridui-grid
Uma Maheshwaraa
Uma Maheshwaraa

Reputation: 603

Angular UI-grid edit cell on Click button

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

  1. 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
  2. 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?

Edit Cell on Click calendar

Upvotes: 1

Views: 3589

Answers (2)

Arntor
Arntor

Reputation: 806

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');
  };

Upvotes: 1

Revathi K
Revathi K

Reputation: 1

if we use celltemplate then single click event for edit is not work. try any other way to show your data instead of using celltemplate.i think we have cellfilter,directive use below link http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

Upvotes: 0

Related Questions