In a custom context menu how to identify clicked item?

In a custom context menu how to identify clicked item?

Posted by: arkhyuki on 10 December 2018, 4:40 am EST

• 

  arkhyuki

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 10 December 2018, 4:40 am EST

  Hi,
  
  I am trying to implement a custom menu like described here https://www.grapecity.com/en/demos/spread/JS/TutorialSample/#/demos/extendContextMenu

  I am having trouble detecting the selected menu item from the ‘command’ function

  I am using Angular 5, and so far I have implemented the following code:

  
  private customMenuView() {
        this._spread.contextMenu.menuData =[];
        const menuItems:Array<CustomField> = this._appModelService.myMenuItems.filter(item => item.columnAssigned === null);
        for (let i = 0; i < menuItems.length; i++) {
          console.log(menuItems[0]);
          let itemMenuField:GC.Spread.Sheets.ContextMenu.IMenuItemData = {
            text: menuItems[i].name,
            name: menuItems[i].name,
            command: this.showLoginDialog;
            workArea: 'colHeader'// viewport
            };
  
            this._spread.contextMenu.menuData.push(itemMenuField);
        }
    }
  
   private showLoginDialog(args:any)
    {
      console.log(args);
    }
  
  

  When showLoginDialog is called, I d like to know which item of the menu has been activated, so that depending on that an action is performed.

  Any idea how that can be achieved?

  Thanks.

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 11 December 2018, 9:51 am EST

  Hello,

  I would suggest you to please take a look at the demo here to know how to intercept the click of context menu item:
  
  https://www.grapecity.com/en/demos/spread/JS/TutorialSample/#/demos/customMenuView

  Thanks,
  
  Deepak Sharma

• 

  arkhyuki

  • Post Options:
  • Link
    Copy

  Posted 12 December 2018, 8:14 am EST

  Hello,
  
  I took the suggested look, but still got the same problem:

  
  if (menuItems[i].id === 0 )
            {
              itemMenuField.command = function (menuItemData, host, event) {
                console.log(menuItemData);
                console.log(host);
                console.log(event);
                
              };
            }
  
  

  When I try to follow the example on the link I found that only menuItemData has value: host and event are undefined.

  menuItemData also is a weird javascript object like this one:

  
  xa {name: "", kv: false, lv: 1, eq: 1, mv: false, …}
  BQ: La
  rM: (2) [Pb, Pb]
  sM: {length: 0}
  tM: Ra {AN: 0, BN: 0, CN: 1, DN: 0, EN: 0, …}
  uM: Sa {}
  __proto__: Object
  Cv: div
  Hv: div
  Ks: div
  Kv: div
  Lq: {20% - ACCENT1: v, 20% - ACCENT2: v, 20% - ACCENT3: v, 20% - ACCENT4: v, 20% - ACCENT5: v, …}
  Ov: div
  Pt: a {JB: false, KB: false, LB: null, MB: null, NB: 300, …}
  St: a {JB: false, KB: false, LB: null, MB: null, NB: 300, …}
  Su: {}
  ... and so forth
  
  

  I do not see where it may be storing the information of the selected item.

  May be the problem has to do with differences betwen the JS and Angular versions?

  Could you provide just a small angular sample of how to get the selected item on the custom menu?

  Thanks.

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 14 December 2018, 3:29 am EST

  Hello,

  I have escalated this issue to the development team. I will let you know as soon as I get an update on it.
  
  The tracking id for this issue is 264904.

  Thanks,
  
  Deepak Sharma

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 18 December 2018, 7:25 am EST

  Hello,

  Developer suggest to use the code as below to handle the event for custom menu item.

  spread.contextMenu.menuData.push({
  
  text: “Custom Menu”,
  
  name: “customItem”,
  
  command: function (context, options) {
  
  if (options.customData) {
  
  alert(options.customData);
  
  }
  
  },
  
  workArea: “viewport”
  
  });

  spread.contextMenu.menuView.getCommandOptions = function (menuItemData, host, event) {
  
  if (menuItemData.name === ‘customItem’) {
  
  return { customData: “custom data!” }
  
  }
  
  };

  Please test and let me know if you face any issues.

  Thanks,
  
  Deepak Sharma