on_click

attaches a click behavior for component items with the specified CSS class.

function 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 = new 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