allows distinguishing between single and double-click events
on:{
onItemSingleClick(id){
const item = this.getItem(id);
if (item.$count){
item.open ? this.close(id) : this.open(id)
}
}
}
The event helps to avoid potential collisions, when you need to handle both single and double-click events.
Assuming you have a TreeTable
component on your page, and want to:
Editability of a component is achieved with the help of the editable
property set to true
.
The property should be accompanied with the editaction
property to specify the action that will trigger editing.
webix.ui({
view: "treetable",
columns: [/* config for columns */],
editable: true, // editing will be triggered upon a double-click
editaction: "dblclick" });
If left as on the example above, the treetable will not be able to open a branch upon a click on the branch title.
Here you can leverage the onItemSingleClick
event. The handler accepts 3 parameters:
webix.ui({
view: "treetable",
editable: true,
editaction: "dblclick"
// config
on:{
onItemSingleClick(id){ const item = this.getItem(id);
if (item.$count){
item.open ? this.close(id) : this.open(id)
}
}
}
});
Now the component knows how to distinguish between single and double-clicks and perform the corresponding operations safely.