DataGrid - Actions column formatter

[kengo-infor]

Request Summary:

Requesting [IdsDataGridColumn] to provide popup-menu option (e.g. menuId – similar to the one offered by SohoDataGridColumn), allowing us to easily reference/render [ids-popup-menu].

Background:

As working with [SohoDataGridColumn] in the past, we used its Actions formatter with menuId pointing at soho-popupmenu:

{
  id: "editAction",
  ...
  icon: "more",
  formatter: Soho.Formatters.Actions,
  menuId: "actions-menu",
  click: (_event, data: SohoDataGridColumnClickData[]) => {
   ...
  },
}

It works great (did not have to do much more – simply Soho component took care of how the menu should render).

Now trying to do something same/similar with [IdsDataGridColumn] - as found in one of examples (enterprise-wc\src\components\ids-data-grid\demos\columns-formatters.ts) simply formatting a column as button:

columns.push({
  id: 'more',
  name: 'Actions',
  formatter: dataGrid.formatters.button,
  icon: 'more',
  type: 'icon',
  align: 'center',
  click: (info: any) => {
    console.info('Actions clicked', info);
  },
  text: 'Actions'
});

Currently it does NOT offer popup-menu option, as used to find in SohoDataGridColumn (menuId) ; therefore, requesting such an option allowing user to easily define popup-menu for this type of column-formatter use-case.

Alternatives considered:

I am NOT quite sure how to specify ids-popup-menu, defined somewhere else to show at the right position (just trying to get UI/view interaction/behave somewhat similar to what we used to do) – simply thought of doing something like this, but offset can be incorrect (and we sure did not want to attempt recalculating offset – can lead to bugs; not too comfortable going this route):

click: (rowData: any, columnData: IdsDataGridColumn, event: MouseEvent) => {
  ...
  this.actionsMenu.nativeElement.target = event.target;
  this.actionsMenu.nativeElement.show();
},

Another dumb idea I was trying is to format the column as ids-menu-button:

formatter: (rowData: Record<string, unknown>, columnData: IdsDataGridColumn, index: number) => {
  const id = `actions-menu-${index}`;
  return `<ids-menu-button id="menu-button" menu="actions-menu">
       <ids-icon icon="more"></ids-icon>
     </ids-menu-button>`;
},

Trying to define that ids-popup-menu (id=”actions-menu”) somewhere else; then, it seems NOT able to render the popup-menu, making me wonder if I needed to do something like this (though I probably should not have to render same ids-popup-menu over and over while rendering grid rows):

formatter: (rowData: Record<string, unknown>, columnData: IdsDataGridColumn, index: number) => {
  const id = `actions-menu-${index}`;
  return `<ids-menu-button id="menu-button" menu="actions-menu">
       <ids-icon icon="more"></ids-icon>
     </ids-menu-button>
     <ids-popup-menu  id="actions-menu">
      <ids-menu-group>
       <ids-menu-item value="1">Option A</ids-menu-item>
       <ids-menu-item value="2">Option B</ids-menu-item>
       <ids-menu-item value="3">Option C</ids-menu-item>
      </ids-menu-group>
     </ids-popup-menu>`;
},

YEP, I now do get to see popup menu…, but rendered within that grid row-cell (not quite what we would like to see):

NOT quite sure what else to try...

Starting to think that whatever we have been doing in the past might not be supported…??? If so, please do consider enhancing IdsDataGrdiColumn to provide a similar option (menuId) offered by SohoDataGridColumn; otherwise, please provide a sample code that we could try.

THANK YOU!!!

[jbrcna]

QA Passed