Bashkim Jaka Bashkim Jaka - 1 month ago 25
HTML Question

How to create a custom header menu for Webix datatable?

I'm trying to create a custom menu for an icon in the datatable header. The main idea is to show this menu for the one specific column (on icon click)
Here's my current code:

http://webix.com/snippet/b5259f40

{
view:"datatable",
columns:[
{ id:"info", header:"Info", fillspace:1},
{ id:"props", header:"<i id='settings' class='fa fa-list' style='text-align:center;'></i>", width:150}
],
data:[],
on:{
onHeaderClick:function(id, e, node){
$$("mymenu").show(node);
}
}
});

webix.ui({
view:"popup",
body:{
view:"menu", data:[],
on:{
onMenuItemClick:function(id){
webix.message(id);
this.getParentView().hide()
}
}
})


For now, the popup opens when I click anywhere in the header.

How can I append menu for the icon only? TIA

Answer

[update]

You are required to add an onClick function for your icon. In order to align the popup window with the icon, you have to manually adjust its x and y offsets according to your needs. Please check below:

onClick:{
  "fa": function(id, e, node){  //"fa" is the classname in your header
        $$("mymenu").show(
       {
          x : 780,            //left offset from the right side
          y : 30              //top offset
       });
   }
}

Please check the snippet here.