onItemSingleClick

allows distinguishing between single and double-click events

Example

on:{
  onItemSingleClick(id){
    const item = this.getItem(id);
    if (item.$count){
      item.open ? this.close(id) : this.open(id)
    }
  }
}

Related samples

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:

• edit the name of a branch on a double-click
• expand a branch on a single click on its title.

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:

• id (number) - obligatory. the branch Id
• event (object) - optional. The PointerEvent object
• node (object) - optional. The HTML node of the branch.

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.

Back to top