New Feature Idea / Menu Slots via Custom Renderer #2367
Replies: 3 comments 14 replies
-
|
I'm all for more extensibility as you never know what usecases people have. Also wow cool, didnt know that SSMS was using Slickgrid 🤩 |
Beta Was this translation helpful? Give feedback.
-
|
Hey!I wanted to share how we currently customize menus and what pain points a "Slots" feature could solve. How We Customize Menus TodayWe do three things repeatedly: 1. Hide built-in commands via boolean flagsgridMenu: {
hideExportCsvCommand: true,
hideExportTextDelimitedCommand: true,
hideTogglePreHeaderCommand: true,
// ... often 5-8 of these per grid
},
contextMenu: {
hideCollapseAllGroups: true,
hideExpandAllGroups: true,
hideCopyCellValueCommand: true,
// ... then re-add our own versions
}2. Add custom command items (composed from multiple layers)const gridMenuCommandItems = [
...baseServiceItems, // "Reset view" from shared service
{ command: 'refresh-data' },
'divider',
{ command: 'toggle-indentation' }, // conditional
{ command: 'collapse-all' },
{ command: 'expand-all' },
...domainItems, // e.g. "Show to account groups", "Show to rubrics"
...consumerProvidedItems, // additional items passed via @Input
];3. Imperatively update menu items for dynamic state// After toggling indentation, we find and update the menu item title:
const cmd = gridOptions.gridMenu.commandItems.find(
item => item !== 'divider' && item.command === 'toggle-indentation'
);
if (cmd) {
cmd.title = this._indentationEnabled ? 'Disable Indentation' : 'Enable Indentation';
}Pain Points
What Would Help UsA. Simpler hiding// Instead of 5 boolean flags:
hideCommands: ['export-csv', 'export-text-delimited', 'toggle-preheader']
// Or a filter:
commandFilter: (cmd) => !cmd.startsWith('export-') || cmd === 'export-excel'B. Optional
|
Beta Was this translation helpful? Give feedback.
-
|
@jr01 the feature was included in PR #2367 and is available in the version 10.0.0-beta.0 release. Give it a try if you can, I'll keep it in Beta for the next 2 weeks in case of feedback or last minute breaking change, then go for stable release at the end of February Live Demo was also updated and demoing slots rendering: Some notes about the Slot feature:
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
@zewa666 / @jr01 / @lewis-sanchez
hey guys, just reaching out for some feedback from some big users like you since I'm working on this next feature. The idea came out after looking at the MSSQL extension (which now uses Slickgrid-React for one of their grid for Editing Data) and I noticed that some of their header menu could look quite different and I was wondering if I could provide some kind of Slots to the Menu Items. I managed to do it, with copilot's help, by simply adding an optional custom renderer and when provided would be used instead of the default code. It's not real Slot since I needed something native and not specific to any frameworks, so a custom renderer make sense and is very similar to a SlickGrid Formatter. The other great thing is that a while ago I merged all similar menu code for all the menu plugins and with that in place, I was able to add this feature with less than 50 lines of code and it works for all menu plugins (Cell Menu, Context Menu, Grid Menu, Header Menu).
Note this is scheduled for my next upcoming major v10
I interacted with @lewis-sanchez on the MSSQL extension and I was wondering, if you @lewis-sanchez think that this could be useful to your project? if so, do you have any feedback in regards to the code show below.
below is MSSQL extension header menu from the main grid, which is a bit different compared to Slickgrid-React
Then here's my current implementation with a custom menu item renderer, a user could use HTML string or native DOM element (the later is better for CSP compliance and it can also be useful for adding event listener)
I also provided a
defaultItemRendererwhich you guessed it, can be used as the default item renderer except that this is rather assignable on each Menu PluginsBelow is that what that looks like when used in all 4 menu types. A few notes:
So what do you guys think? Even if you aren't going to use it, I'm still thinking of adding it since it's less than 50 lines of code anyway.
Extras
I was also thinking to add a Menu Footer... but I think this one is simply just too much and probably unnecessary because list items are already clickable anyway. Still is an idea... in the image below, the 2 buttons are in the footer area.
Beta Was this translation helpful? Give feedback.
All reactions