Dymanic Context menu on button click

Webix JS
1

I create a context menu on application start up


<code class="js>
function doCreateMiscUI() {
	webix.ui({
		view: "contextmenu",

		autowidth: true,
		id: "actionMenu",
		on: {
			"onItemClick": (id: string, e: MouseEvent, 
			node: HTMLElement) => {
				Actions.doExecutePowerAction(id);
			},
			"onBeforeShow": () => {
				actionMenu.refresh();
			}
		}
	});
	actionMenu = $$("actionMenu") as webix.ui.contextmenu;
}
`

I then want to manipulate the context menu items and show it on a button click event.


<code class="js>
function onPowerButtonClick(e: any, id: any) {

	// Clear action menu data.
	actionMenu.clearAll();

	// Get selected item.
	let selItem = rxGrid.getSelectedItem();

	// Populate action menu data.
	if (selItem instanceof Types.Receiver) {
		actionMenu.add({ id: "self", value: "Restart: " 
		+ selItem.name, icon: "fa fa-sign-in" });

		if (selItem.assignedtx_combo_value !== "") {
			actionMenu.add({
				id: "assignedtx", value: "Restart: " 
				+ selItem.assignedtx.name.toString().toUpperCase(),
				icon: "fa fa-sign-out"
			});
			actionMenu.add({ id: "both", value: "Restart: 
			Both", icon: "fa fa-asterisk" });
			actionMenu.add({ $template: "Separator" });
			actionMenu.add({
				id: "computer", value: "Attached computer", 
				icon: "fa fa-desktop", submenu: [
					{ id: "computer_restart", value: "Restart" },
					{ id: "computer_poweron", value: "Power on" },
					{ id: "computer_softpoweron", value: "Soft power on" },
					{ id: "computer_poweroff", value: "Power off" }
				]
			});
		}
	}
	actionMenu.refresh();
	actionMenu.show(e.target, { x: -11, y: 10 });
}
`

The context menu shows correctly the first time i click a power button , but when if i then click another power button, the context menu does not change content. If i then click a third power button, the content is changed to content of the second button click. It seems the content is lacking behind by one.

  1. Click power button A => content OK.
  2. Click power button B => content = power button A
  3. Click power button C => content = power button B
    etc…etc.
2

I have also tried the folllowing, without success.

  1. actionMenu.data = {…}
  2. actionMenu.define(“data”, {…})
  3. set the actionMenu data to an array and manipulate the array on button click.
  4. actionMenu.desctruct and then create a new instance on button click.
3

I think i manage to find the problem, the grid selected item is set after the button event is triggered. Now i just need to find a way to make sure the row containing the button is selected before the button event triggers.

4

Fixed the issue by referencing the buttons row from the id arg.


<code class="js>
function onPowerButtonClick(e: any, id: any) {

	// Clear action menu data.
	actionMenu.clearAll();

	// Get selected row.
	let selRow = rxGrid.getItem(id.row);

	// Populate action menu data.
	if (selRow instanceof Types.Receiver) {
		actionMenu.add({ id: "self", value: "Restart " + selRow.name, 
		icon: "fa fa-sign-in" });

		if (selRow.assignedtx_combo_value !== "") {
			actionMenu.add({
				id: "assignedtx", value: "Restart " + 
				selRow.assignedtx.name.toString().toUpperCase(),
				icon: "fa fa-sign-out"
			});
			actionMenu.add({ id: "both", value: "Restart both", 
			icon: "fa fa-asterisk" });
			actionMenu.add({ $template: "Separator" });
			actionMenu.add({
				id: "computer", value: "Attached computer", 
				icon: "fa fa-desktop", submenu: [
					{ id: "computer_restart", value: "Restart" },
					{ id: "computer_poweron", value: "Power on" },
					{ id: "computer_softpoweron", value: "Soft power on" },
					{ id: "computer_poweroff", value: "Power off" }
				]
			});
		}
	}

	// Refresh and show action menu.
	actionMenu.refresh();
	actionMenu.show(e.target, { x: -11, y: 10 });
}
`