Rank 1
Iron
Hi,
I am trying to add a right click context menu to the header of a column in the React Grid. Note: The grid is about 500 pixels down the page so it needs to be scrolled to be within view (I think this may be relevant).
I am adding the headerCell:
headerCell={GridColumnHeader}With this header:
const GridColumnHeader = (props) => {
return (
<div className="k-link" onClick={props.onClick}
onContextMenu={(e) => {
e.preventDefault()
handleContext(e, props.field)
}}
>
{props.title}
{props.children}
</div>
);
};The problem is in the handleContext menu, the clientX and clientY coordinates seem off, it looks initially like they aren't taking into account the position the page is in when scrolled.
function handleContext(e, field) {
offSet.current = {
// left: e.clientX,
// top: e.clientY,
left: e.pageX,
top: e.pageY,
};
setShow(true);
}As you can see, here I use pageX and pageY which seems more reliable. But then I get strange behavior when the menu is displayed and I click another column header (it can jump around a little but I think I might need to universally hide the menu when anything other than the menu is clicked).
Am I doing something wrong, or am I right to use this?
The popup code is below:
<Popup show={show} offset={offSet.current}>
<Menu
onSelect={() => setShow(false)}
vertical={true}
style={{
display: "inline-block",
}}
>
<MenuItem text="Item1">
<MenuItem text="Item1.1"/>
<MenuItem text="Item1.2">
<MenuItem text="Item1.2.1"/>
<MenuItem text="Item1.2.2"/>
</MenuItem>
</MenuItem>
<MenuItem text="Item2">
<MenuItem text="Item2.1"/>
<MenuItem text="Item2.2"/>
</MenuItem>
<MenuItem text="Item3"/>
</Menu>
</Popup>I also have this to hide the menu when clicked outside:
React.useEffect(() => {
document.addEventListener("click", () => {
show ? setShow(false) : null;
});
}, [show]);1 Answer, 1 is accepted
Hi Ricky,
I have tried the scenario in the following example, but the Popup is shown in the right position with clientX/Y and with pageX/Y:
Note that in more complex layout scenarios you need to ensure that you are passing the correct offset and also, you should set the offset in the state, so the Popup can update accordingly.
If the issue on your side persists, please provide an example demonstrating the exact problem, so we can debug it locally.
Looking forward to your reply.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Hi Konstantin,
Your example does indeed work. Using the offset in state in my project has fixed the weird glitch I had with right clicking on the column headers but still clientX and clientY display far higher up the page. Using pageX and pageY works fine now it seems so I'm happy to use this. I'm guessing I have some overriding CSS or maybe it's React Bootstrap in combination causing an issue.
Thanks,
Ricky
I just realized that I have tested the clientX and clientY in the example, but without introducing scrollbar to the page (only to the Grid). If there is scrolling on the page, this will definetely cause problems, because the clientX and clientY return the position within the view and not within the page:
I think the example in the above article provides the clearest explanation for what causes the misalignment when the page is scrolled: "For example, clicking on the left edge of the viewport will always result in a mouse event with a clientX value of 0, regardless of whether the page is scrolled horizontally."
Rank 1
Iron