Hello-
We are attempting to implement a widget within the Grid and Scheduler and need some guidance on how we can get closer to our intended UI/UX.
Here is what we would like:
- Screenshot 2024-02-14 at 2.32.11 PM.png (18 KiB) Viewed 161 times
Here is what we have been able to accomplish:
- Screenshot 2024-02-14 at 2.30.51 PM.png (14.22 KiB) Viewed 161 times
However we have a few challenges thus far:
- What's the best approach for controlling what is visible / hidden when the menu activates as these options are driven based on the context and the Popup is generated when the Scheduler is loaded and reused for each row.
- How can we accomplish having a caret/arrow and space between the menu that's activated upon the button click and the button the menu pertains to? We tried using a container instead of the menu and then put the menu inside the container but that leads to the browser crashing after you mouse out of the cell and no console errors to help with debugging.
- How can we remove the separator in between each menu item choice? The button.menu config doesn't seem to allow you to specify a configuration for the menu itself, only the menu items.
- How can we ensure that when we hover off the current row, that the widget properly closes itself and it's children? Currently, we are seeing this behavior when we hover outside of the scheduler from the current column it gets activated upon or when hover up or below.
- Screenshot 2024-02-14 at 2.43.09 PM.png (63.22 KiB) Viewed 161 times
Here is the code that we are using:
new Popup({
cls: 'b-transparent b-bubblebutton-container',
id: 'bubbleButtonPopup',
anchor: false,
align: 'r50-r0',
autoShow: false,
autoClose: true,
lazyItems: [
{
ref: 'addButton',
type: 'button',
cls: 'b-rounded b-raised b-indigo',
icon: 'b-fa-plus',
menuIcon: null,
pressedIcon: null,
menu: [
{
text: 'Project',
ref: 'addProject',
},
{
text: 'Assignment',
ref: 'addAssignment',
},
{
text: 'Phase',
ref: 'addPhase',
},
],
},
{
ref: 'kabobMenu',
type: 'button',
cls: 'b-rounded b-raised b-indigo',
icon: 'b-fa-ellipsis-vertical',
menuIcon: null,
menu: [
{
text: 'Delete',
ref: 'delete',
},
{
text: 'Edit',
ref: 'edit',
},
],
},
],
})
