webix jet contextmenu example

Webix JS
#1

I’m using webix jet and have “view” module - dataList.js.
Inside it I have a
var dataTable = {…}
and
var cMenu = {view:“contextmenu” …}
and I need to attach cMenu to dataTable, but when I try to do it in $oninit of dataTable, cMenu is undefined… how to init cMenu correctly and attach it to dataTable, using webix jet? (I can do it with
webix.ui({
view:“contextmenu”, …}
but it is not very useful in jet framework).

Thank you!

#2

Hi, two techniques are possible here:

(1) You can initialize the context menu within the $oninit handler via scope (so that it is destroyed properly):

var ui = { view:"datatable", id:"datatable1"};

return {
    $ui: ui,
    $oninit:function(view, scope){
         scope.ui( {  view:"contextmenu", id:"cmenu", data:[ ..data.. ]});
         $$("cmenu").attachTo($$("datatable1"));
     }
}

(2) You can initialize the context menu in a special block $windows where configurations for multiple windows can be stored:

var ui = { view:"datatable", id:"datatable1"};

return {
    $ui: ui,
    $windows:[
         {  view:"contextmenu", id:"cmenu", data:[ ..data.. ]}
    ],
    $oninit:function(view){
         $$("cmenu").attachTo($$("datatable1"));
     }
}
#3

Also, you can download the sample from GitHub: GitHub - webix-hub/jet-demos at 19_context_menu

#4

Hi How can i attach context menu with datatable in new Webix jet API. The above solution seems for older version

#5

@qadirkanore yes, the above solution is intended for Webix Jet 0.x.

$window was deprecated in favour of direct initialization, as it requires minimal coding and allows more flexibility, so you can use

init(){
  this.ui(window_config);
}

this.ui works similar to webix.ui but will destroy window object automatically when master view is destroyed.

The context is an instance of popup, so the syntax is described in the related docs. Also, please check the following snippet: https://webix.com/snippet/dec9f580

#6

Thanks @Listopad it worked perfectly.

#7

@Listopad how can i remove the context menu from UI after attaching it??

#8

@qadirkanore unfortunately, there is no method opposite to attachTo. The only solution we can suggest so far is to destroy the context menu

$$("conttextId").destructor()
#9

Thanks @Listopad for quick replay but is there a way to hide or show the context menu based on condition

#10

@Listopad @Nastja Please reply on my comment .thank you

#11

You can check the solution in the following thread.