ContextMenu

API Reference

Overview

Contextmenu is triggered by right mouse click. Ui-related Contextmenu inherits from both window and list. It looks like 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

Data property includes list items in the window, separator stands for a line to divide window areas while 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 a Contextmenu to a Component

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

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

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

2) Secondly, you initialize a contextmenu in a separate within a separate webix.ui function:

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

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

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


Related sample:  Context Menu: Attaching to List

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

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

A component HTML container is stored in its $view specific property:

$$("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