Our blazing fast Grid component built with pure JavaScript


Post by thejas.pateel »

Hi team,
We need to show context menu even there is no record in the grid. can you please help us how to achieve this thing. is there any function to trigger context menu whenever needed?


Post by tasnim »

Hi,

Yes, sure. There is a similar thread about this here viewtopic.php?t=23328
This should solve your issue


Post by thejas.pateel »

Hi,
Please let us know how to implement in VUE js project . in that thread is discussed for react project


Post by thejas.pateel »

Hi I am not getting how to use this code in VUE js

useEffect(() => {
    if (ref && ref.current) {
      (ref.current.instance.subGrids as any)[
        "locked"
      ].currentElement.addEventListener("contextmenu", (ev: any) => {
        if (ref && ref.current) {
          menu.show();
          menu.setXY(ev.clientX, ev.clientY);
          // console.log(ref.current.instance.features.cellMenu.menu);
          // ref.current.instance.features.cellMenu.menu.show();

      // ref.current.instance.features.cellMenu.menu.setXY(
      //   ev.clientX,
      //   ev.clientY
      // );
    }
    ev.preventDefault();
  });
}
  }, []);

Post by Animal »

We could allow the CellMenu feature to be configured to show when not on a cell: https://github.com/bryntum/support/issues/6316


Post by thejas.pateel »

Hi,
above code is working for me. can you please tell how to identify whether we have clicked to cell or outside of the row?


Post by tasnim »

Hi,

Did you mean to listen for the cell menu item click?

chrome_xJoYqY4ZH4.gif
chrome_xJoYqY4ZH4.gif (240.23 KiB) Viewed 236 times

Please check this https://bryntum.com/products/grid/docs/api/Core/widget/Menu
And there is all the events you can listen for https://bryntum.com/products/grid/docs/api/Core/widget/Menu#events

I hope, I understood you correctly


Post by thejas.pateel »

Hi yes ,
its coming thanks


Post by thejas.pateel »

Hi,
But how can we find whether we clicked on row or outside row?in contextmenue event


Post by tasnim »

Hi,

Here is an example of how you can check

        grid.subGrids.normal.currentElement.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            if (!e.target.className.includes('b-grid-cell')) {
                menu.show();
                menu.setXY(e.clientX, e.clientY);
            }
        });

Hope this helped


Post Reply