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

EventHash 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