Как создать собственное меню заголовка для таблицы данных Webix?

Я пытаюсь создать пользовательское меню для значка в заголовке с данными. Основная идея состоит в том, чтобы показать это меню для одного конкретного столбца (при нажатии на значок). Вот мой текущий код:

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()
      }
    }
})

На данный момент всплывающее окно открывается, когда я щелкаю в любом месте заголовка.

Как я могу добавить меню только для значка? ТИА


javascript html drop-down-menu datatable webix
person Bashkim Jaka    schedule 18.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

[обновление]

Вам необходимо добавить функцию onClick для вашего значка. Чтобы выровнять всплывающее окно со значком, вы должны вручную настроить его смещения по осям x и y в соответствии с вашими потребностями. Пожалуйста, проверьте ниже:

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
       });
   }
}

Пожалуйста, проверьте фрагмент здесь.

person jayantish    schedule 18.10.2016
comment
Большое спасибо! Еще один вопрос - можно ли вместо столбца добавить к иконке окно меню? ИМХО так будет лучше смотреться. Если можно, конечно - person Bashkim Jaka; 20.10.2016