Как сгенерировать событие не в дочерний элемент?

Webix JS
#1

Во всей документации на “docs.webix.com” не смог найти содержание параметра “array params” для:

boolean callEvent(string name,array params);
Parameters
name string the event name, case-insensitive
params array an array of the event related data

Что задаётся в params?

На самом деле, вопрос немного сложнее:

    this.ui = {
      view:  "tabview",
      cells: this.menu,
      multiview: {
        animate:true
      }
   }

, где this.menu - это 10 закладок вида:

{ header:"<span class='webix_icon fa-home'></span>",
        body:{
          cols:[
            { view:"datatable", id:"kquest1", editable:true,
              columns: [
                { id:"kqid", header:"", hidden:true, tooltip:false },
                { id:"kqgrp", header:"", hidden:true, tooltip:false },
                { id:"questionk", header:poly.t("Q u e s t i o n"), hidden:false, fillspace:true, tooltip:"#questionk#",
                  css:{'text-align':'left'},
                  template:"<span class='questionk_textarea'>#questionk#</span>"
                }
              ],
              on:{
                "onFocus":function(current_view, prev_view){
				...
                },
                "onItemClick":function(id){
				...
              },
              tooltip:function(obj, common){
                return "<span class='webix_tooltip_my1'>"+obj[common.column.id]+"</span>";
              },
              datatype: "json",
              data: k.getQall()[0]
            },

            { view:"resizer" },

            { view:"datatable", id:"kanswe1", editable:true,
              columns: [
                { id:"kqid", header:"", hidden:true, tooltip:false },
                { id:"kaid", header:"", hidden:true, tooltip:false },
                { id:"kqgrp", header:"", hidden:true, tooltip:false },
                { id:"answerk", header:poly.t("A n s w e r"), hidden:false, fillspace:true,
                  editor:"popup", css:"webix_textarea_my2",
                  tooltip:"#answerk#",
                  template:"<span class='answerk_textarea'>#answerk#</span>"
                }
              ],
              on:{
                "onFocus":function(current_view, prev_view){
				...
                },
                "onItemClick":function(id){
				...
                },
                "onBeforeEditStop":function(id){
				...
                }
              },
              tooltip:function(obj, common){
                return "<span class='webix_tooltip_my2'>"+obj[common.column.id]+"</span>";
              },
              datatype: "json",
              data: k.getAall()[0],
              save: Gkernr+"/kaw/11"
            }
          ]
        }
});

И по click в поле левой таблицы мне нужно инициировать такое же событие, но в правой таблице в соответствующем поле.

Это всё завёрнуто в Webix Jet. Я совершенно запутался в этой иерархии.
“id” объектов Webix, Webix Jet и document.getElementById(id) - это совершенно разные сущности. Пытаюсь достучаться до DOM, так нативных id не могу определить, или в конец запутался, или…что-то с головой.

Да, кстати, а массив в callEvent - нигде не описан?

#2

Работает такое решение: вводим в шаблоны столбцов уникальные id -

template:
{ span id=‘kans#kqid#’ class=‘answerk_textarea’ }#answerk#{ /span }

kqid - индекс из таблицы mySQL, то есть, kans#kqid# = уникальность;
По логике проекта индексы таблиц вопросов и ответов - совпадают.

Тогда в левой таблице - вопросов - по событию ‘onItemClick’ делаю:

сonst itm_kqid = this.getItem(id.row).kqid;
сonst row2kansw = document.getElementById(“kans”+itm_kqid);
const event = new Event(“click”, {bubbles: true, cancelable: true})
row2kansw.dispatchEvent(event);

Последняя строка при ‘click’ по полю левой таблицы делает справа то, что нужно: вызывает popup-редактор поля ответа, соответствующего полю вопроса слева.

Но не получилось-таки добиться того же эффекта средствами webix.
Что, видимо, не очень… По крайней мере, когда я попытался оставить красивое модальное окно, работавшее в html-странице до загрузки webix, попытка его использования в среде webix приводила к ступору браузера.

#3

Здравствуйте,

Вам нужно вызвать событие onItemClick на таблице с ответами и передать в него id искомой ячейки, которое состоит из id ряда и имени поля (колонки).

$$("kanswe1").callEvent("onItemClick", [ {row: row, column:column} ]);

Метод callEvent действительно может принимать любой массив аргументов, но если Вы вызываете существующее событие Webix view, то и аргументы должны быть теми же (они описаны в API каждого события). Например, у обработчика события onItemClick аргументы следующие: id, event, node.

Чтобы получить id элемента с искомым qkid из таблицы с ответами, можно воспользоваться методом find:

onItemClick:function(id){ 
   var kqid  = this.getItem(id.row).kqid;
   var found  = $$("kanswe1").find(function(obj){
      return obj.kqid ==kqid;
   }, true);
 
   $$("kanswe1").callEvent("onItemClick", [{row:found.id, column:"answerk"}]);
}

Вот рабочий пример: https://webix.com/snippet/9182db43.

#4

Ай да красота!
Спасибо за пояснения по callEvent.
find я именно так и использую! Но событие по callEvent не мог передать…