The user can add any user-defined handler to any of the available events. To do this, the user can use the attachEvent method with the following parameters:
webix.attachEvent(evName, evHandler);
Several handlers can be attached to one and the same event, and all of them will be executed. The names of the events are case-insensitive.
There is a simple way of removing an event-handler:
webix.detachEvent(id); // unique id of the event handler
Below you can find the full list of events available for Kanban API:
fires on an item click
$$("myBoard").attachEvent("onListIconClick", function(itemId,ev,node,list)){
// your code
};
params:
fires when an item has been double-clicked
$$("myBoard").attachEvent("onListItemDblClick", function(itemId,ev,node,list)){
// your code
};
params:
Related sample: Item DoubleClick
fires on clicking any icon in the list item
$$("myBoard").attachEvent("onListIconClick", function(iconId, itemId,ev,node,list)){
// your code
return false;
};
params:
returns:
{bool} if an event handler returns false, onListItemClick handler will not be called.
fires on clicking an avatar in the item
$$("myBoard").attachEvent("onAvatarClick", function(itemId,ev,node,list)){
// your code
};
params:
returns:
{bool} if an event handler returns false, onListItemClick handler will not be called
fires before an item selection started
$$("myBoard").attachEvent("onListBeforeSelect", function(itemId,selection,list)){
// your code
};
params:
returns:
{bool} if an event handler returns false, the item will not be selected
fires after an item has been selected
$$("myBoard").attachEvent("onListAfterSelect", function(itemId,list)){
// your code
};
params:
fires on an item right click, before native context menu displayed
$$("myBoard").attachEvent("onListBeforeContextMenu", function(itemId,ev,node,list)){
// your code
// block native context menu
webix.html.preventEvent(ev);
};
params:
Related sample: onContext event
fires after the context menu was called in the item area
$$("myBoard").attachEvent("onListAfterContextMenu", function(itemId,ev,node,list)){
// your code
};
params:
fires before the mouse button is pressed and the cursor is moved over a draggable item
$$("myBoard").attachEvent("onListBeforeDrag", function(context,ev,list)){
if(...){
return false;
}
return true;
};
params:
returns:
{bool} returning false will prevent dragging of the element
fires before a dragged element is moved over the droppable list
$$("myBoard").attachEvent("onListBeforeDragIn", function(context,ev,list)){
if(...){
return false;
}
return true;
};
params:
returns:
{bool} returning false will prevent dropping of the element
fires before a dragged element is released over the droppable list
$$("myBoard").attachEvent("onListBeforeDrop", function(context,ev,list)){
if(...){
return false;
}
return true;
};
params:
returns:
{bool} returning false will prevent further drag-and-drop processing
fires after drag-n-drop has finished
$$("myBoard").attachEvent("onListAfterDrop", function(context,ev,list)){
// your code
};
params:
fires before an item is going to be dropped into the list with different status
$$("myBoard").attachEvent("onBeforeStatusChange", function(itemId,newStatus)){
var status = this.getItem(itemId).status;
if(...){
return false;
}
return true;
};
params:
returns:
{bool} returning false will prevent further drag-and-drop processing
fires after an item has been dropped into the list with a different status
$$("myBoard").attachEvent("onListAfterDrop", function(itemId,newStatus)){
// your code
};
params: