Documentation

Handling Events

Attaching Event Handler

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:

  • evName - name of the event;
  • evHandler - user-defined event handler.
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.

Detaching Event Handler

There is a simple way of removing an event-handler:

webix.detachEvent(id); // unique id of the event handler

List of supported events

Below you can find the full list of events available for Kanban API:

onListItemClick

fires on an item click

$$("myBoard").attachEvent("onListIconClick", function(itemId,ev,node,list)){
    // your code
};

params:

  • itemId - {string} the id of the clicked item
  • ev - {event object} a native event object
  • node - {element} the target HTML element
  • list - {object} the list object where click has happened

Related sample:  Item Click

onListItemDblClick

fires when an item has been double-clicked

$$("myBoard").attachEvent("onListItemDblClick", function(itemId,ev,node,list)){
    // your code
};

params:

  • itemId - {string} the id of the clicked item
  • ev - {event object} a native event object
  • node - {element} the target HTML element
  • list - {object} the list object where doulble-click has happened

Related sample:  Item DoubleClick

onListIconClick

fires on clicking any icon in the list item

$$("myBoard").attachEvent("onListIconClick", function(iconId, itemId,ev,node,list)){
    // your code
    return false;
};

params:

  • iconId - {string} the id of the icon
  • itemId - {string} the id of the clicked item
  • ev - {event object} a native event object
  • node - {element} the target HTML element
  • list - {object} the list object where click has happened

returns:

{bool} if an event handler returns false, onListItemClick handler will not be called.

Related sample:  Icon Click

onAvatarClick

fires on clicking an avatar in the item

$$("myBoard").attachEvent("onAvatarClick", function(itemId,ev,node,list)){
    // your code
};

params:

  • itemId - {string} the id of the clicked item
  • ev - {event object} a native event object
  • node - {element} the target HTML element
  • list - {object} the list object where click has happened

returns:

{bool} if an event handler returns false, onListItemClick handler will not be called

Related sample:  Avatar Click

onListBeforeSelect

fires before an item selection started

$$("myBoard").attachEvent("onListBeforeSelect", function(itemId,selection,list)){
    // your code
};

params:

  • itemId - {string} the item id
  • selection - {boolean} true - if to select, false - to unselect
  • list - {object} the list that contains the item

returns:

{bool} if an event handler returns false, the item will not be selected

Related sample:  Item Click

onListAfterSelect

fires after an item has been selected

$$("myBoard").attachEvent("onListAfterSelect", function(itemId,list)){
    // your code
};

params:

  • itemId - {string} the item id
  • list - {object} the list that contains the item

Related sample:  Item Click

onListBeforeContextMenu

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:

  • itemId - {string} the id of the clicked item
  • ev - {event object} a native event object
  • node - {element} the target HTML element
  • list - {object} the list object where click has happened

Related sample:  onContext event

onListAfterContextMenu

fires after the context menu was called in the item area

$$("myBoard").attachEvent("onListAfterContextMenu", function(itemId,ev,node,list)){
    // your code
 
};

params:

  • itemId - {string} the id of the clicked item
  • ev - {event object} a native event object
  • node - {element} the target HTML element
  • list - {object} the list object where click was happened

onListBeforeDrag

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:

  • context - {object} drag-n-drop context object with a set of properties:
    • from - the source object,
    • to - the target object,
    • source - the ID of the dragged item(s),
    • target - the ID of the drop target, null for drop on empty space,
    • start - the ID from which DnD started
  • ev - {event object} a native event object
  • list - {object} the list object where the event has happened

returns:

{bool} returning false will prevent dragging of the element

Related sample:  Drag-n-Drop

onListBeforeDragIn

fires before a dragged element is moved over the droppable list

$$("myBoard").attachEvent("onListBeforeDragIn", function(context,ev,list)){
    if(...){
        return false;
    }
    return true;
};

params:

  • context - {object} drag-n-drop context object with a set of properties:
    • from - the source object,
    • to - the target object,
    • source - the ID of the dragged item(s),
    • target - the ID of the drop target, null for drop on empty space,
    • start - the ID from which DnD started
  • ev - {event object} a native event object
  • list - {object} the list object where the event has happened

returns:

{bool} returning false will prevent dropping of the element

Related sample:  Drag-n-Drop

onListBeforeDrop

fires before a dragged element is released over the droppable list

$$("myBoard").attachEvent("onListBeforeDrop", function(context,ev,list)){
    if(...){
        return false;
    }
    return true;
};

params:

  • context - {object} drag-n-drop context object with a set of properties:
    • from - the source object,
    • to - the target object,
    • source - the ID of the dragged item(s),
    • target - the ID of the drop target, null for drop on empty space,
    • start - the ID from which DnD started
  • ev - {event object} a native event object
  • list - {object} the list object where the event has happened

returns:

{bool} returning false will prevent further drag-and-drop processing

onListAfterDrop

fires after drag-n-drop has finished

$$("myBoard").attachEvent("onListAfterDrop", function(context,ev,list)){
    // your code
};

params:

  • context - {object} drag-n-drop context object with a set of properties:
    • from - the source object,
    • to - the target object,
    • source - the ID of the dragged item(s),
    • target - the ID of the drop target, null for drop on empty space,
    • start - the ID from which DnD started
  • ev - {event object} a native event object
  • list - {object} the list object where the event has happened

Related sample:  Drag-n-Drop

onBeforeStatusChange

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:

  • itemId - {string} the item's id
  • status - {string} a new item's status
  • list - {object} the list object where the event has happened
  • context - {object} drag-n-drop context object
  • ev - {event object} a native event object

returns:

{bool} returning false will prevent further drag-and-drop processing

onAfterStatusChange

fires after an item has been dropped into the list with a different status

$$("myBoard").attachEvent("onListAfterDrop", function(itemId,newStatus)){
    // your code
};

params:

  • itemId - {string} the item id
  • status - {string} a new item's status
  • list - {object} the list object where the event has happened
  • context - {object} drag-n-drop context object
  • ev - {event object} a native event object
Back to top