Log in to start a topic

Context Menu with Wijmo 5

Posted by: terryfoster on 14 September 2017, 2:15 am EST

  • terryfoster

    • Post Options:
    • Link
      Copy

    Posted 14 September 2017, 2:15 am EST

    Are there any examples of creating custom context menus using Wijmo 5 components, such as Menu?

    Thanks,

    Terry

  • ashishjindal

    Posted 14 September 2017, 2:15 am EST

    Hello Terry,

    Currently, Wijmo 5 does not have a ContextMenu control but you can use our Wijmo 3 Menu widget to create the custom context menu. I have created a small sample implementing Wijmo 3 Menu widget with FlexGrid for your reference.

    Regards

    2015/02/FlexGrid_ContextMenu.html

  • bernardo

    Posted 14 September 2017, 2:15 am EST

    Hi Terry

    Here’s an example for you:

    http://jsfiddle.net/Wijmo5/b28acgfw/

    This fiddle has two main functions:

    • createContextMenu creates the menu. The function takes as parameters an array with the options and a callback that handles the menu selection. The menu is implemented using a wijmo.input.ListBox control.

    • showPopup: shows an element at a given point on the screen.

    I hope this is useful as a starting point for your implementation.

    Note: I posted this a little after Ashish added an example using Wijmo 3, which is also an option. You can take your pick :wink:

  • terryfoster

    Posted 14 September 2017, 2:15 am EST

    Awesome. Thank you very much.

  • stevenh77

    Posted 14 September 2017, 2:15 am EST

    Bernardo love your wijmo5 solution!

    Do you have an Angular example where we could set the menu options and function actions within a controller?

  • bernardo

    Posted 14 September 2017, 2:15 am EST

    Hi Steven

    Not yet, but we should and we will. I will make an example for you ASAP.

    Thanks for bringing this up, it will be a nice sample.

  • bernardo

    Posted 14 September 2017, 2:15 am EST

    Hi Steven

    I just made a new fiddle that shows how you can create context menus using the same markup and controller logic as you would using a regular Wijmo 5 Menu control:

    http://jsfiddle.net/Wijmo5/z4mx8gm2/

    The commands are defined in the controller (with commands/command parameters, etc), the options in markup (wj-menu-item…). A single context menu may be attached to multiple elements on the page.

    We will add this directive to wijmo.angular.js in our next maintenance release, it adds real value to the product.

    Thanks a lot for the suggestion.

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Hello Bernardo,

    I tried to use wj-context-menu within wj-flex-grid but I got: Multiple directives [wjContextMenu, wjFlexGrid] asking for new/isolated scope on <wjFlexGrid…

    I solved the problem by putting the wj-context-menu within the div which surrounds the grid : )

    Regards

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Hi Bernardo,

    I used the first example you gave us,

    I see it works fine in FF and Chrome but not in Internet Explorer : ( what is the reason?

    Thanx

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Hello,

    Any comment on how this would work in IE9:

    http://jsfiddle.net/Wijmo5/b28acgfw/

    Regards

  • bernardo

    Posted 14 September 2017, 2:15 am EST

    Hi

    The problem with the original fiddle is that it hides the menu when it gets a “blur” event, and apparently IE has some timing issue. The solution is to add a setTimeout to the “blur” handler.

    Here’s a modified version of the fiddle that works on all browsers I tested, including IE9, 10, and 11:

    http://jsfiddle.net/Wijmo5/b28acgfw/

    BTW, in build 42 (which was just released) we added a wj-context-menu directive that takes care of all these little details for you.

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Great, thanx!!!

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Hello,

    Can a context menu be multilevel? I need some options to have suboptions…

    Regards

  • ashishjindal

    Posted 14 September 2017, 2:15 am EST

    Hello,

    The current version does not support multilevel options since its uses ListBox control. You can request for this feature on our UserVoice page (https://wijmo.uservoice.com/) so that other users can also vote for it and the same can be added on priority.

    Regards

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Ok, thanx, I will!!

    Regards

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Hello,

    if various elements share the same context menu - how can I get - in the cmd function - the id of an element that the context menu was clicked on?

    Regards

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    That is - how to get the reference on the element that the context menu was clicked on?

    Regards

  • ashishjindal

    Posted 14 September 2017, 2:15 am EST

    Hello,

    I have forwarded your requirement to the development team(119360) for review and would update you once I hear anything from them.

    Regards

  • ashishjindal

    Posted 14 September 2017, 2:15 am EST

    Hello LOSTINTRANSLATION,

    Thanks for this request. The development team has added an “owner” property to the Menu control. When a menu is used as a context menu, this property indicates the element that the menu was invoked for.

    It will be available in the v2 release which is scheduled next month.

    Regards

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Hello,

    in addition to opening the context menu (wj-context-menu) with a right click can it be also opened by clicking on a button? (can the same context menu be opened in both ways?)

    Thanx

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Hello,

    any advice on this?

    Regards

  • manpreet-kaur

    Posted 14 September 2017, 2:15 am EST

    Hello,

    I tried triggering the contextmenu event of the element on which the Wijmo menu has been set as a context menu. However, it did not show up the Wijmo menu on a button click.

    I am investigating the issue further at my end. I would soon share my observations on the same.

    Thanks,

    Manpreet Kaur

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Ok, thanx, that would be great!!

  • lostintranslation

    Posted 14 September 2017, 2:15 am EST

    Any news on triggering the context menu event?

  • manpreet-kaur

    Posted 14 September 2017, 2:15 am EST

    Hello,

    I apologize for the delayed response. Unfortunately, I am not able to get the contextmenu event to be triggered on button click. I have escalated the issue to the concerned team. I will let you know as soon as I get any information in this regard.

    Thanks,

    Manpreet Kaur

  • bernardo

    Posted 14 September 2017, 2:15 am EST

    Hello all

    There’s a couple of ways to achieve what you want.

    The simplest would probably be to trigger a ‘contextmenu’ event in response to the click. For example:

    [html]

    [/html]

    And the OpenContextMenu function would be implemented as follows:

    [js]$scope.OpenContextMenu = function (e, menuOwnerId) {

    var evt = new Event(‘contextmenu’);

    evt.clientX = e.clientX;

    evt.clientY = e.clientY;

    document.getElementById(menuOwnerId).dispatchEvent(evt);

    }[/js]

    The OpenContextMenu function takes two parameters. The first is the MouseEvent that triggered the action. This is needed so the menu knows how to position itself over the click. The second parameter is the id of the element that owns the context menu. This is needed so the proper event handler will be called.

    I hope this helps.

  • rchu

    Posted 14 September 2017, 2:15 am EST

    Hello @Ashish Jindal and @Bernardo I need help with having a context menu in wijmo grid which should call a function everytime I click on it: so that the context menu should load the data by calling an api.

  • vandana-kadari

    Posted 14 September 2017, 2:15 am EST

    Hello @Bernardo i see that you implemented the context menu code for wijmo5.

    Similar to this http://jsfiddle.net/kbje1h1L/9/ i want it to be implemented in pure Javascript when you right click on any cell in the grid it should display the context menu like add row,delete row.

    I tried following this fiddle and changed code accordingly to pureJS,however i am not sure how can we

    <wj-menu id=“idMenu” ng-show=“false”>

    <wj-menu-item cmd=“cmdAdd” cmd-param=“1”>Add Row</wj-menu-item>

    <wj-menu-item cmd=“cmdRemove” cmd-param=“2”>Remove Row</wj-menu-item>

    </wj-menu>

    change this code to pure JS.

  • vandana-kadari

    Posted 14 September 2017, 2:15 am EST

    Got the answer for this.Thought of sharing those so that it can help others

    http://wijmo.com/topic/wjmenu-issue-with-flexgrid/

  • bernardo-castilho

    Posted 7 December 2017, 5:00 am EST

    Sorry about the delay…

    Here’s a pure Javascript version of the grid with a custom context menu:

    http://jsfiddle.net/Wijmo5/f2cq7gqy/

    And here is a more complete example:

    http://demos.wijmo.com/5/PureJS/LearnWijmo/LearnWijmo/#bx7cto2u

    Hope this helps!

  • hussein.khatib

    Posted 25 March 2024, 5:39 pm EST

    Hi,

    Are there any examples of creating custom context menus using PivotGrid, such as Menu?

    Thanks

  • vivek.pannu

    Posted 27 March 2024, 11:28 pm EST

    Hi Hussein,

    We have already answered this query on our other portal, here’s a copy of the response -

    You can set the ‘customContextMenu’ property of the PivotGrid to false, to hide the default context menu of the grid and handle the ‘contextmenu’ event on the PivotGrid’s host element to show a custom context menu as per your requirements, you can use Wijmo’s Menu control as a custom context menu.

    Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/react-9n92j7?file=index.js

    In the above sample, we have added the ‘RemoveField’ and ‘ToggleSubtotals’ options in the context menu, you can modify the menu options as per your requirements.

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.