Datatable context menu in MVC style

Webix JS
1

Looking for some assistance adding a context menu to a datatable using the MVC framework. I’ve tried a few different options such as creating a view for the context menu ect and am not moving forward. Any direction?

define([ "controllers/data_table", "models/data_table" ],function(c,m){ var grid = { view:"datatable", borderless: true, select:true, columns: m.columns, autoheight:true, url:"http://127.0.0.1/data", datafetch:50, pager: "pagerA" }; return {$ui:grid}; });

2

Please, check our demo at GitHub - webix-hub/jet-demos at 19_context_menu

3

That helps, doesn’t completely show MVC though. I would like to reuse the context menu component. This is what I was able to put together so far:

define([ "controllers/data_table", "models/data_table", "views/context_menu" ], function(c,m,context_menu){ var grid = { view:"datatable", id:"data_table", borderless: true, select:true, columns: m.columns, autoheight:true, url:"http://127.0.0.1/data", datafetch:50, onContext:{}, pager: "pagerA" }; return { $ui:grid, $oninit:function(view, scope){ scope.ui(context_menu); $$("context_menu").attachTo($$("data_table")); } });
define(function(){ return { $ui:{ view:"contextmenu", id:"context_menu", data:["Add","Rename","Delete",{ $template:"Separator" },"Info"], on:{ onItemClick:function(id){ var context = this.getContext(); var list = context.obj; var listId = context.id; webix.message("List item: <i>"+list.getItem(listId).title+"</i> <br/>Context menu item: <i>"+this.getItem(id).value+"</i>"); } } } }; });

4

The same context menu can be easily linked with several components at once.

Please, check this article and the sourse code of the following sample:

http://docs.webix.com/samples/03_menu/06_context_for_list.html