Eckige UI-Grid-Bearbeitungszelle auf Klick-Schaltfläche - angularjs, angular-ui-grid, ui-grid

Ich benutze Angular zusammen mit UI-Grid (http://ui-grid.info/)

Ich habe das Grid mit den folgenden Optionen eingerichtet

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>"}}

Das Feld wird ordnungsgemäß wie unten angezeigt. Ich habe ein paar Probleme

1. Nur Double Click funktioniert zur Bearbeitung des Feldes. Ich verstehe, editcellonfocus ist eine Option, aber es funktioniert nicht wie vorgesehen, da ich Doppelklick nicht deaktivieren kann
2. Ich möchte den Bearbeitungsprozess starten, indem ich auf die Kalenderschaltfläche klicke und die Doppelklick-Schaltfläche deaktiviere. Gibt es BEGINEDIT fire-Ereignis für die Elternzelle?

Antworten:

Wenn wir cellTemplate verwenden, ist das Einzelklickereignis für die Bearbeitung nicht funktionsfähig. versuchen Sie es mit einer anderen Methode, um Ihre Daten anzuzeigen, anstatt cellTemplate.i zu verwenden. Denken Sie, wir haben cellfilter, directive benutze den untenstehenden Link http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

Ich wollte heute dasselbe tun, es scheint, dass es keine "normale" Möglichkeit gibt, dies zu tun, Sie müssen das Ereignis "dblclick" in der Zelle simulieren, die Sie mit der Bearbeitung beginnen müssen.

Also zuerst in Ihrem cellTemplate müssen Sie die "row" als Parameter an die Click-Handler-Funktion senden.

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

Später im clickHandler müssen Sie den Index der angeklickten Zeile herausfinden und dann das HTML-Element der Zelle holen, mit der Sie die Bearbeitung beginnen möchten.

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