Context menu - dynamically - simple way

Webix JS
1

Is there a simple way to define that datatable or tree uses context menu and load context menu dynamically?

I’d like to generate context menu only when context menu requested, and based on current context data. Something like:
http://webix.com/snippet/b28f38c8
I.e. define configuration of context menu together with loaded element (mytree) and load content upon request (right mouse click).

<ui>
    <contextmenu id="menu1" url="MenuGenerator.ashx?MenuID=123&ContexID=321" datatype="xml"/>
</ui>
2

Please check the next example

http://webix.com/snippet/605244ae

you can init and load the menu directly in onBeforeContextMenu handler

3

Things changed.
Thanks.

4

Looks like with XML data “parse”-method for context menu has issues:
http://webix.com/snippet/e98641d1
The XML data is generated, but parser does not pick it up.

Btw, repeated context calls (right-clicks) will double the menu options.
Could not figure out how to clean list of options.

5

The sample will not work in the snippet editor, as it attempts to load data from different domain, that violates default security rules.

As for double loading you can call clearAll - same as for any other data component.
http://docs.webix.com/api__link__ui.menu_clearall.html

6

The sample will work if the browser is opened with disabled security.

For example:

…\chrome.exe --disable-web-security

7

Can you show an example with XML data parser?

8

The update snippet - http://webix.com/snippet/e3c07ac8

9

I see where made a mistake.
Great, thank you.

10

How can I define the width of ContextMenu?
In the example below the ContextMenu is too narrow, and menu items do not fit:
http://webix.com/snippet/5d61b385

11

Also, is there a way to extend ContextMenu properties of Grid, Tree and Treegrid controls?
I’d like to:

  1. define an attribute (ex. contextMenuUrl) that accepts url to context menu generation page.

  2. define an attribute (ex. contextMenuFormat) where I can define menu format (xml, json)

  3. load data from contextMenuUrl once. Currently every time I call context menu, the app sends request to web-server.

  4. show context menu by right-mouse click w/o defining event handler onBeforeContextMenu.

For example, I successfully use extended properties of “Text” element:

	webix.protoUI({
		name:"sctext", 
		defaults:{ attributes:{} },
		$cssName:"text",
		//custom attribute
		maxLength_setter:function(value){
			this.config.attributes.maxlength = value;
		}
	}, webix.ui.text);

Something similar would be great to have for datatable context menu.

12

As for width - all common webix sizing properties works fro Context Menu
http://webix.com/snippet/5306fe75

13

As for customization - yes, you can create a custom control based on datatable with automatic context menu generation, something like next

http://webix.com/snippet/5dce3a7b

14

Great. Thank you.

15

Based on your example I created a protoUI of datatable that contains simplified support of context menu. (http://webix.com/snippet/1aeb8944)

More questions arisen.

Is it possible to:

  1. Initialize Context menu configuration via XML? Current example uses hard-coded init?
  2. Set width automatically, based on width of popup menu content?
  3. Retrieve column value by Column Index, instead of Column Name (list.getItem(listId).title)?
  4. From Context menu “onItemClick” event handler send an event to parent control (datatable in this case), where the context menus is attached to?
  5. add scrollbar to context menu when it’s needed? In example below the menu does not fit the screen. (http://webix.com/snippet/ca38fda5)
  6. Select (highlight) row, where where context menu was poped-up. Currently when I call “this.select(id)” method, the row gets highlighted, but the rest of context menu processing stops working. (http://webix.com/snippet/01a89bc6)
16

(1) Yes, you can use webix.markup.parse to convert XML to js and use it in the webix.ui command.

(2) Not possible

(3) You can use columnId command that will convert index to id
http://docs.webix.com/api__link__ui.treetable_columnid.html

(4) You can get the master component, like this.getContext().obj and can call any events, by using callEvent API

(5) Can be done, by using the next settings for the menu

yCount:2, autoheight:false, scroll:true,

http://webix.com/snippet/ceb8d15b

(6) wrap the select command in webix.delay

webix.delay(function(){
     this.select(id);
}, this);
17

Thank you for answers.

Regarding #1, can you share an example?
Specifically, settings of Context Menu Properies. Sometimes JSON to XML translation is not clear, esp. with nested objects.

Regarding #5, I tried to play with different options.
Permanent scrollbar is annoying when = 5. Not needed, but still there.
yCount has a bug when it’s > 5. (http://webix.com/snippet/89891502).
I’ll keep looking for a nicer solution.

18

Issue with yCount confirmed, will be fixed in Webix 1.11
Currently if scroll is enabled it is always visible - we plan to add more flexible solution in Webix 2.0

19

As for example, it will be something like this
http://webix.com/snippet/96347ff7

You can add extra properties or sub-tags to submenuconfig - they all will be used for submenu configuration.

20

Thank you.

Tried http://webix.com/snippet/96347ff7,
getting an error: “Uncaught ReferenceError:
sumbmenu is not defined”.

Also, quesiton:

Can Menu Configuration be a part of XML data, returned by “ContextMenuGenerator.ashx” ?
My intention is to have Context Menu Configuration and Data within single XML response.