CODEWITHSUNDEEP
javascriptangularag-grid
Sarim Javaid Khan
Sarim Javaid Khan

Reputation: 830

How to use javascript default event object in ag-grid's event methods

I am new to ag-grid, I actually want to call event.preventDefault() in the "cellEditingStopped" grid event but I am unable to pass the default javascript event object into it. Is there any way to achieve it?

Also, the grid event's object should also be available because it contains the row data that I need to use for my db operations.

Any help would be much appreciated.

Following is my code.

<ag-grid-angular
          id="timesheetInstructionGrid"
          [ngStyle] ="instructionsGridStyle"
          style="width: 100%;" 
          class="ag-theme-balham no-wrap"
          [rowData]="timesheetInstructionsRowData" 
          [columnDefs]="timesheetInstructionsColumnDefs"
          [frameworkComponents]="frameworkComponents"
          [singleClickEdit]="true"
          [defaultColDef]="defaultColDef"
          [pagination]="true"
          [enableColResize]="true"
          [stopEditingWhenGridLosesFocus]="true"
          [overlayNoRowsTemplate]="overlayInstructionsTemplate"
          (gridReady)="onInstructionsGridReady($event)"
          [rowSelection]="rowSelection"
          [rowDeselection]="'true'"
          (rowSelected) = "onInstructionsRowSelected($event)"
          (cellClicked) = "onInstructionsCellClicked($event)"
          (cellValueChanged) = "onCellValueChanged($event)"
          (cellEditingStopped) = "instructionGridCellEditDone($event)"
          [domLayout]="domLayout"
          >
      </ag-grid-angular>

Upvotes: 2

Views: 2407

Answers (1)

Paritosh
Paritosh

Reputation: 11588

You should be able to get that object as handler's argument itself.

Have a look at the plunk I've created: ag-Grid in Angular - event object with RowClicked event

Open the console and click on any row. I have provided the example for rowClicked event.

onRowClicked($event: RowClickedEvent) {
  console.log($event.event)  ;
}

This is what I'm getting in log.

MouseEvent {isTrusted: true, screenX: -776, screenY: 239, clientX: 310, clientY: 210, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 310
clientY: 210
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 45
layerY: 94
metaKey: false
movementX: 0
movementY: 0
offsetX: 45
offsetY: 11
pageX: 310
pageY: 210
path: (23) [span, div.ag-cell.ag-cell-not-inline-editing.ag-cell-with-height.right-align.ag-cell-value.ag-column-hover…, div.ag-row.ag-row-odd.ag-row-level-0.ag-row-position-absolute.ag-row-hover.ag-row-focus.ag-row-selec…, div.ag-body-container.ag-layout-normal, div.ag-body-viewport.ag-layout-normal, div.ag-body-viewport-wrapper.ag-layout-normal, div.ag-body.ag-layout-normal.ag-row-no-animation, div.ag-root.ag-font-style.ag-layout-normal, div.ag-root-wrapper-body.ag-layout-normal, div.ag-root-wrapper.ag-layout-normal.ag-ltr, ag-grid-angular#div_0_ag-grid-angular_0.ag-theme-balham.ag-grid-row-hover-actions, div#div_0.ag-grid-container, im-ag-grid, div, mat-card.mat-card.ng-star-inserted, im-test-app-grid-config-svc.ng-star-inserted, ruf-app-canvas, div.ng-star-inserted, im-test-app-root, body.desktop, html, document, Window]
relatedTarget: null
returnValue: true
screenX: -776
screenY: 239
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: span
target: span
timeStamp: 29035.00000014901
toElement: span
type: "click"
view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
which: 1
x: 310
y: 210

Upvotes: 1

Related Questions