Comments (5)
Hey devs,
I am trying to do the same thing. I have recursive components in a treeview. I want to have a simple menu shown upon a right click of a child component.
When run, a right click no longer shows the browser's default right click menu. But it does not show the ContextMenu that I have defined in the child. It just does nothing. No errors or crashes.
Unfortunately, I can not my share code but the code provided by bsts6124 is syntactically identical to mine.
Is there a different way to implement it in this scenario? Or does this use case break it?
Thanks
from blazorcontextmenu.
Hey,
I stumbled on the same issue some days ago.
after some debugging, i found that although it looks like the Click does not get through because the menu is not shown, it is actually moved around and should be displayed.
However I found the issue with how it is moved around and that it is clpped outside of the view:
I have a Blazor page displaying a razor component, which includes another razor component. The child component is displayed fine and with the BlazorContextMenu just fine when it is displayed without the hosting component.
If it is displayed as the child, the BlazorMenu just seems to do nothing when right-clicking on the element that should open the Context Menu. All calls until ManualShow(...) are executed.
When viewed with the developer View, the div.blazor-context-menu is located too much to the right and too much to the bottom. Just like the position is no longer absolute but relative to the host component.
Together with an "overflow:hidden;" in the host view, nothing is displayed at all.
If i move left and top via the Browsers devTools to 0px/0px it moves the context menu into view at the top left corner of the child razor component. It sems like calculating the target position is off in this case.
Image: Just after right clicking into the gray area right of the green blocks.
Image: After changing the left and top position manually.
from blazorcontextmenu.
Found a -dirty- workaround for this:
Once the razor component is loaded, use javascript to change the parent element of the Menu (html element with id == menuid) to the main element. This makes the div use the right anchor for its position.
I guess this has the same cause as the other "wrong position" issues.
Javascript:
function MoveElementToMain(id) { const elementToMove = document.querySelector('#'+id); const newParentElement = document.querySelector('main'); if (elementToMove.parentElement != newParentElement) { newParentElement.appendChild(elementToMove); } }
razor component:
protected override void OnAfterRender(bool firstRender) { base.OnAfterRender(firstRender); JS.InvokeVoidAsync("MoveElementToMain", new object[] { "BusPanelDeviceContextMenu_" + BpdId }); }
from blazorcontextmenu.
You cannot have multiple blazor menus with the same Id. The foreach seams to be creating multiple menus with Id="Edit"
.
You should move the menu creation outside of the loop
from blazorcontextmenu.
Hey everyone,
I was able to get the context menu to show up in a recursive setting by simply defining the context menu in the parent component. Then, in any child/recursive components, I used the contain context menu triggers to reference that context menu.
In my previous implementation, I had the context menu defined in the recursive component - which was giving me trouble.
It seems that, as @stavroskasidis suggested, it was creating multiple menus with the same ID.
Hope this helps.
from blazorcontextmenu.
Related Issues (20)
- Configurable direction of menu-open (e.g. bottom-right, top-left)
- SubMenu component doesn't use ContextMenuBase.ZIndex HOT 4
- "Cannot read properties of undefined (reading 'removeEventListener')" after closing menu HOT 3
- Support touch devices by changing to pointer events
- Scrolling menu options HOT 2
- Context menu does not close automatically if a dialogue menu is opened. HOT 1
- include blazorContextMenu.min.css and blazorContextMenu.min.js in a more Blazor like way. Reference the static files will not necessary HOT 1
- Context menu position on dialog windows HOT 2
- Disable menu item in table depending the model. HOT 2
- ContextMenuTrigger element is messing with table css rules HOT 1
- a way to detect which mouse button triggered context menu HOT 1
- "OnClick" actions not working in components HOT 2
- Uncaught (in promise) undefined HOT 1
- associate OnClick to a task made the component wait for the task is finish to close itself HOT 1
- Fix multiple security issue found in Microsoft.AspNetCore.Components 6.0.0 HOT 6
- About running speed HOT 4
- RTL Support
- Error on browser console when publishing on dotnet 8 HOT 2
- Scrolling Menu Items HOT 2
- TypeError when hovering over submenu items in BlazorContextMenu HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blazorcontextmenu.