onClick

attaches a click behavior for component items 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