Problems & questions using a Menu plugin in a subview

Hello, I’m having trouble using a Menu in a subview. My top view, “top.js”, imports my class TopMenu from “top_menu.js”. I’ve pasted both below.

My questions/problems:

  1. When the views are rendered, clicking on the menu buttons does not seem to change the URL. (No error, just nothing happens.)
  2. If I place “this.use(plugins.Menu, “menuLocalId”);” within init() of top.js, I get an error, “TypeError: Cannot read property ‘parent’ of null”. But I thought that’s where it is supposed to go. If I place it within init() of top_menu.js, I get no error, but as noted above the menu just doesn’t seem to work.
  3. top_menu.js only works if I include that mysterious blank subview in the third row (see below). It doesn’t even matter if it’s $subview.false or $subview.true. But if I remove it, I get that same TypeError noted above.

Advice would be greatly appreciated!

Thanks.

//top.js
import {JetView, plugins} from "webix-jet";
import {TopMenu} from "./top_menu.js"
export default class TopView extends JetView{
	config(){
		var userInterface = { 
			rows: [
				{$subview:true, name:"topMenuSubview"},
        {$subview: true, name: "floorplan"}]
        }
		return userInterface;
    }
	init() {
    this.show("top_menu", {target:"topMenuSubview"}),
		this.show("floorplan", { target: "floorplan" }),
	} 


//top_menu.js
import {JetView, plugins} from "webix-jet";
export default class TopMenu extends JetView{
  config() {
    return {
      rows:[
        {type:"header", template:"Just a header"}
        ,
        {view:"menu", id: "menuGlobalId", localId:"menuLocalId", name: "menuName",
        data:[
          { id:"test_floorplan", value:"FloorplanButton" }, 
          { id:"data", value:"DataButton" }
        ]}
        ,
        {$subview:true}] //Why does this need to be here?  I get TypeError without it.
      }
  } 
  init(){
    this.use(plugins.Menu, "menuLocalId");
  }
}

Hello @re_404,

  1. When the views are rendered, clicking on the menu buttons does not seem to change the URL. (No error, just nothing happens.)

As far as I can see, the issue is simply in the fact that you do not have selection enabled within the menu view. The plugin relies on the onAfterSelect event to trigger appropriate handlers, so it is necessary to enable the select option in order for that event to get triggered.

  1. If I place “this.use(plugins.Menu, “menuLocalId”);” within init() of top.js, I get an error, “TypeError: Cannot read property ‘parent’ of null”. But I thought that’s where it is supposed to go. If I place it within init() of top_menu.js, I get no error, but as noted above the menu just doesn’t seem to work.

The plugin must be enabled in the JetView that contains the menu view, in your case this is the TopMenu view.

  1. top_menu.js only works if I include that mysterious blank subview in the third row (see below). It doesn’t even matter if it’s $subview.false or $subview.true. But if I remove it, I get that same TypeError noted above.

Essentially, the JetView containing the menu has to include a dynamic subview of some sort - it is used to display the JetView you are trying to navigate to using the Menu plugin.