onClick

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

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

• the "onClick" behavior is defined for the component 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.

Back to top