[Data Grid] Table events

[marcelimati]

Hello, would you add MouseEvent that is fired whenever user clicks row? Currently event emitter only fires rowData and index.

 /** Row select event */
  _selectRow(event: MouseEvent, rowData: Record<string, any>, index: number) {
    if (
      this.rowSelectable &&
      !this.rowSelectionFormatter.disabled?.(rowData, index) &&
      !this.rowSelectionFormatter.hideCheckbox?.(rowData, index)
    ) {
      // metaKey -> command key
      if (!this.multiSelectionWithClick && !event.ctrlKey && !event.metaKey) {
        this.rowSelection.clear();
      }

      this._toggleNormalCheckbox(rowData);
    }

    this.rowClick.emit({ rowData, index });
  }

And I want to use MouseEvent for displaying additional menu on click to determine position on the screen (specifically would want it on cell, because I want to show different data depending on cell in column) - It would be better to have it in Cell Selection Event, but Event doesn't fire when cell is already selected, which is not what I want. But I believe it should still be in rowClick event. While at it, It would be nice to have right click event with same values, so can open additional context menu on cell/row.

[nzbin]

I created an online example and you can have a look. https://stackblitz.com/edit/angular-material-15-starter-x1xj4z-rsdmhq-ftbc3j?file=src%2Fapp%2Fapp.component.html

[marcelimati]

Okay i thought it would work somehow with customRowTemplate, so context menu is opening using cdk menu. This solves opening context menu using on row click. But I have two issues with that. 1) [matRowDefColumns]="getColumnKeys(columns)" definition is using function so it is being called with every onChanges, so it infects performance, is there a way to do it with pipes for better performance? 2) How do I get a refference of DOM element that was used to open context menu? I didn't use cdk mat context menu, I was getting this from click event target property. But I can't find this in cdk menu version. I want to add style/class to that element, so user knows which element was clicked to open menu.

The second thing that I mentioned earlier was Cell Event. With Row event I can get whole row data, but I don't know on which column in given row user clicked, But looking how this component is done, I think it would be easier to just add to click Event emiting MouseEvent as well. So I can bind a trigger in that event and show mat menu in given coordinates.

[marcelimati]

Okay so I was able to achieve 2) in following way:

<ng-template matRowDef let-row [matRowDefColumns]="getColumnKeys(columns)">
                <tr
                  mat-row
                  [cdkContextMenuTriggerFor]="menu"
                  [cdkContextMenuTriggerData]="{row}"
                  (cdkContextMenuOpened)="menuOpened(row)"
                  (cdkContextMenuClosed)="menuClosed()"
                  [ngClass]="{ 'clicked': row.id === right_clicked_row }">
                ></tr>
</ng-template>

And by assigning right_clicked_row to current row_id in menuOpened and deassigning this id in menuClosed functions.

Now I would want to achieve same thing but also get current clicked cell value (Either from left click or right click) and open Context Menu same way as here.

[marcelimati]

Hello @nzbin, I would like to create pull request for this issue, because I experienced another problem which happens when using custom function getColumnKeys(columns). When you use that function together with rowSelectable = true. It adds a column to the table, but not to columns property used to display the columns. Which results in displaying all data in wrong columns because it puts first column, let's say firstName into MtxGridCheckboxColumnDef column, instead of starting from 2nd column. Anyway I would like to add mentioned changes like adding rightClick support to the table if user wants it. Because for me it's basic thing to work in table grids using either left or right click. The thing is I have never created pull request and I made a changes, but I want to test the changes before creating pull request. How can I achieve that? I cloned the repo made changes, but idk how to "publish" it to some usable example that i can import in fresh angular project and test things I changed.

[nzbin]

The new version 16.3.0 has added rowContextMenu event. You can achieve the context menu with following way. https://ng-matero.github.io/extensions/components/grid/overview#context-menu