onClick

attaches a click handler for component parts with the specified CSS class

hash onClick;

Example

webix.ui({
    view:"list",
    template:"#value# <div class='webix_remove_upload'>Del</div>"
    onClick:{
        "webix_remove_upload":function(ev, id){
            this.remove(id);
            return false; // blocks the default click behavior
        }
    }
});

Related samples

Details
  • the "onClick" behavior is defined for the component's items rather than for the whole component
  • use the "onItemClick" handler to attach a function to item clicking regardless of the CSS class;
  • for standard Webix buttons you'd better use the click property to attach a function;
  • the onClick handler can override the default onclick event:
webix.ui({
    view:"datatable",
    columns:[
        { id:"rank",    header:"", css:"rank",  width:50},
        { id:"title",   header:"Film title",    width:200},
        { template:"<input class='delbtn' type='button' value='Delete'>", width:100 }],        
    on:{
        // the default click behavior that is true for any datatable cell
        "onItemClick":function(id, e, trg){ 
            webix.message("Click on row: " + id.row+", column: " + id.column)
        }
    }, 
    // a click behavior for the cell with a button styled with 'delbtn' class
    onClick:{ 
        "delbtn":function(e, id, trg){
            webix.message("Delete row: "+id); 
            return false; // here it blocks the default behavior
        }
    },
    data:grid_data
});
  • pay attention to returning false from the onClick handler in the above example. It blocks all further click-related events: onBeforeSelect, onAfterSelect, onSelectChange, onItemClick. To check the full stack of the blocked events, you should enable the debug version of the Webix library.
See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix best ui framework and page of object list javascript product.