on_click

redefines default click behavior for component items.

EventHash on_click;

Example

webix.protoUI({
    name:"mylist",
    defaults:{
        template:"#value# <div class='webix_remove_upload'>Del</div>"
    },
    on_click:{
        "webix_remove_upload":function(ev, id){
              this.remove(id);
        }
    }
}, webix.ui.list);

Related samples

Details
  • "on_click" stores default and attached click behavior for component items;
  • Additional click events are attched with the 'onItemClick' handler;
  • For standard Webix buttons you'd better use the click property to attach a function;
  • on_click handler is used to redefine the default onclick event right in the component constructor:
 
grid = webix.ui({
view:"datatable",
columns:[
        { id:"rank",    header:"", css:"rank",          width:50},
        { id:"title",   header:"Film title",width:200},
        {   id:"", template:"<input class='delbtn' type='button' value='Delete'>",  
            css:"padding_less",width:100 }],        
on:{
    "onItemClick":function(id, e, trg){ 
        webix.message("Click on row: " + id.row+", column: " + id.column);}
    } //default click behavior that is true for any datatable cell
});     
 
 
// click behavior for the cell with a button styled with 'delbtn' class
grid.on_click.delbtn=function(e, id, trg){
    webix.message("Delete row: "+id); 
    return false; //here it blocks default behavior
};

Related sample:  Datatable: Custom Handler

See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix html5 ui library and page of list ui product.