ContextMenu

API Reference

Overview

ContextMenu is triggered by a right mouse click. UI-related ContextMenu inherits from both Window and List. It looks the same as the UI-related Menu and shares most of its properties, methods and events.

Initialization

1 . ContextMenu - List

webix.ui({
    view:"contextmenu",
    id:"my_menu",
    data:[
        "Add",
        "Rename",
        "Delete",
        { $template:"Separator" },
        "Info"
    ],
    master:"areaA" //  ID of a DIV container
});

Related sample:  Context Menu

The data property includes list items in the window, the separator stands for the line that divides window areas, while the master property defines the area where the component is initialized.

2 . ContextMenu - Menu

webix.ui({
    view:"contextmenu",
    id:"my_menu",
    data:[
        { value:"Translate...", submenu:[ 
            "English", "Slavic...", "German"
        ]},
        { ...},
        { ... }
    ]
    master:"areaB"
});

Here data includes menu constructor with some items having submenus.

Related sample:  Context Menu

Working with ContextMenu

Getting an Item's Value

You can access any element of a contextmenu and its submenus and attach events to them with the help of the following patterns:

//for list contextmenu
$$("my_menu").attachEvent("onItemClick":function(id){
    webix.message(this.getItem(id).value);
});    
 
//for "menu-like" contextmenu                        
$$("my_menu").attachEvent("onItemClick", function(id){
    var menu = this.getSubMenu(id);
    webix.message("Click: "+menu.getItem(id).value);
})

Linking Contextmenu to a Component

ContextMenu can be initialized for any Webix component. A three-step process includes the following stages:

1) Firstly, you should include the onContext property into the component's construction:

webix.ui({
     view:"list",
     id:"list",
     //list config
     onContext:{} // the empty object
});

2) Secondly, you need to initialize ContextMenu within a separate webix.ui function:

webix.ui({
    view:"contextmenu",
    data:[....],
    ... 
});

3) Thirdly, you should link ContextMenu to the necessary component with the help of either

  • the attachTo() function:
$$('contextmenu1').attachTo($$('list'));


Related sample:  Context Menu: Attaching to List

  • or the master property that points to the necessary component object:
webix.ui({
    view:"contextmenu",
    data:[....],
    master:$$("list")
});

You can link either to the component's object or to its HTML container (like any other HTML on a page). The difference lies within data components - to attach context menu to their items, you need to link to the object of the component.

The HTML container of the component is stored in its specific property $view:

$$("list").$view; //returns <div class="webix_view webix_list" ...></div>

Attaching contextmenu to list

//works with list items
$$('contextmenu1').attachTo($$('list1'));
 
//works with the whole list
$$('contextmenu1').attachTo($$('list1').$view);

It is the nice option to attach contextmenu to Webix controls, e.g. button or any HTML elements on the page:

$$('contextmenu1').attachTo($$('button1').$view);
 
$$('contextmenu1').attachTo(document.getElementById("myElement"));

Getting Properties of the Master Component

Like with context, the area upon which the context menu is called master area or (if you call it over a component or its item), master component.

Master component object is retrieved with the getContext() property.

webix.ui({
    view:"contextmenu"
    on:{
        onItemClick:function(id){
            var context = this.getContext();
            var list = context.obj; //list item object
            var listId = context.id; //id of the clicked list item
 
            webix.message("List item: <i>"+list.getItem(listId).title+"</i> <br/> 
                Context menu item: <i>"+this.getItem(id).value+"</i>");
        }
    }
});

Related sample:  Context Menu: Attaching to List

Related Articles

Back to top
If you have not checked yet, be sure to visit site of our main product Webix js framework and page of context menu javascript product.