Found a No-Code Workaround (It’s Ugly)
First, create a new object variable with this schema:
{
“x”: 0,
“y”: 0,
“data”: “”,
“inside”: false,
“focus”: false
}
For the data grid, create a custom column with a button (NOT an icon). Remove the text from the button and enable the icon (remember to remove the margin on the icon). Add these 4 workflows:
On Blur:
- Pass through condition of not(ActionMenuVar.inside)
- Reset variable ActionMenuVar
On Click:
Change ActionMenuVar to
{
“x”: Event.x,
“y”: Event.y,
“data”: bindable data,
“inside”: true,
“focus”: true
}
On Mouse Enter:
Change ActionMenuVar (partial update) with path set to inside to true
On Mouse Leave:
Change ActionMenuVar (partial update) with path set to inside to false
Now, create your dropdown menu as a separate object outside of the data grid. Bind its conditional rendering/visibility to ActionMenuVar.focus and add 2 workflows:
On Mouse Enter:
Change ActionMenuVar (partial update) with path set to inside to true
On Mouse Leave:
Change ActionMenuVar (partial update) with path set to inside to false
For individual options in the action menu, add a workflow for On Click that:
- Does whatever custom code you want here
- Resets the ActionMenuVar (so it disappears)
Finally, make sure your dropdown position is set to Fixed, and bind the Top and Left variables:
- Top: ActionMenuVar.y + “px”
- Left: ActionMenuVar.x + “px”
This should give you the functionality you’re looking for, but it’s super ugly and might not work well on mobile. You might want to consider finding a JavaScript element with event listeners tied to elementIDs, though I know that gets tricky with data grids.
Also, the reason we need to do the focus step (which might feel redundant) is because sometimes onBlur runs faster than onClick, so the menu will disappear before your click workflow can execute.
If this is terrible for some reason, someone smarter should put it below as I am not working on production code.
