Context menu depending on CellTypeDef

[jvictorsoto]

Right now context menu is common for all columns and defined in pbl-ngrid.

I think it'll be better if we could define it depending on celltype. This way I could have a context menu focused on filtering numbers when the celltype is a number or even not having it at all in some columns.

Proposed implementation:

  <div *pblNgridOverlayPanelDef="'myNumberHeaderMenuPanel'">
    Filtering options for numbers...
  </div>

<div *pblNgridCellTypeDef="'number'; value as value;" matHeaderContextMenu="myNumberHeaderMenuPanel">{{value | number: '1.0-2'}}</div>

[shlomiassaf]

Hi

TL/DR: This is already doable...

First, the context menu is just a plugin which is using the overlay panel to show some content.
Theres an issue with the suggested approach:

<div *pblNgridCellTypeDef="'number'; value as value;" matHeaderContextMenu="myNumberHeaderMenuPanel">{{value | number: '1.0-2'}}</div>

It assigns an overlay panel to the column but when should it show? On right click? with a button?
If a button, what kind, how will it look? and of course lot's of other things to consider.

I wouldn't want to introduce all of these options as they are not related to a column specifically but to what the overlay will do, which is not specific to the column.

---

How can you do it today? Using the material context menu plugin. Source code

The material context menu plugin is more specific. It defines the overlay panel and the button added to the columns to open the context menu.

It comes with a built-in excel menu context style menu but it actually allow you to define your own menu

<pbl-ngrid matHeaderContextMenu="myOwnMenu"></pbl-ngrid>

These context menu styles are actually overlay panels so you can define them like you did in the example above, and use that name. This is one way of defining an overlay panel.

Right now, this is how a context menu style is added:

ngrid/libs/ngrid-material/context-menu/src/lib/context-menu.module.ts

Line 52 in 34d78dc

registry.addMulti('overlayPanels', new PblNgridOverlayPanelComponentExtension('excelMenu', MatExcelStyleHeaderMenu, cfr));

Which is a different way of defining an overlay panel, instead of an ad-hoc template definition it defines a dedicated component and the name ofcourse.

Anyway, the overlay has access to the column which means you can easily switch/case based on the type and show the right column.

You can get more control by accepting injectables or other means of passing options to that style.

If your use case is super specific and you need your style to have proprietary information stored on the column you can always populate the data property on the column and access it from your style.
Note that the library supports external extensions to the column object (i.e. adding properties to column metadata) but this is more complex and not fully documented. However, it is being used by some of the plugins. It requires some extra work.

Good luck!

[jvictorsoto]

Hi,
Yes currently is the option I have implemented. The only real "issue" is that the contextmenu button is shown in every column, and I only want it in some of them.

[shlomiassaf]

The context menu plugin is a simple plugin, mostly built as a proof of concept to what can be done.

Since you already have your own style implemented, the only value you get from the plugin is just that button... which is also a plugin byitsef.

This is how it's added

ngrid/libs/ngrid-material/context-menu/src/lib/context-menu.module.ts

Line 51 in 34d78dc

registry.addMulti('dataHeaderExtensions', new MatHeaderContextMenuExtension(cfr));

Build your own plugin module, add your own button plugin as a column data header extension and control when it is showed/hidden based on your own logic...

[jvictorsoto]

Seems logic. Great lib BTW