onClick

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

hash onClick;

Example

webix.ui({
    view:"datatable",
    onClick:{ 
        "rank_header" : function  (event, column, target) {
            webix.message("Click on header");
        }
    },
    columns:[
        { id:"rank", header:{ css:"rank_header", text:"Click me!" }, width:100 },
        { id:"title", header:"Film title", width:200},
        // more columns
    ]               
});

Related samples

Details
  • the "onClick" behavior is defined for the HTML elements within the datatable (e.g. column headers, icons)
  • 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 }
    ],
    // a click behavior for the cell with a button styled with 'delbtn' class
    onClick:{ 
        "delbtn":function(event, cell, target){
            webix.message("Delete row: "+cell.row); 
            return false; // here it blocks the default behavior
        }
    },
    data:grid_data
});

The onClick handler function receives the following parameters:

  • event - the mouse event object
  • cell / column - the object of a cell or a column where the user clicked; this parameter depends on whether the click was within a cell (the cell object with the row ID and column ID) or a header / footer (the column object with the column ID)
  • target - the HTML element of the click target

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 lightweight js framework and page of javascript data table product.