javascriptdatatableonitemclickwebix

Need to find out content of Webix datatable cell from onItemClick event

Two of my Webix datatable columns are having buttons (defined as a template) in the cell underneath with different text. My requirement is to perform some action based on the button text when they are clicked.

To keep tahings simple, as of now I am showing an alert message which is displaying the row and column intersection information into it by the help of onItemClick:function(e, id, node).

I have made a snippet of my problem here : https://webix.com/snippet/06bd7631

The last two columns with header "Comment" and "Reason" are having buttons with text "display_msg_1" and "display_msg_2" respectively. I need to show this corresponding button text in the alert message when they are clicked. Also the onItemClick event should not work if any other cells apart from having the button is clicked which is the ultimate purpose. Currently the alert is coming for any cell when clicked.

Kindly help me how can I get the button text in this scenario.

Thanks.

Solution

  • Instead of attaching onItemClick handler to the whole component, you can define click handler for specific elements

    Check https://webix.com/snippet/6c28d3c7

    Here, I have changed the code of html buttons like next

    <input type='button' class='btn1' value='display_msg_1' align='center'>
<input type='button' class='btn2' value='display_msg_2' align='center'>

    as you can see, each button has unique CSS class name now

    After that, it possible to use onClick option in the component's config to map handler to the unique CSS classes

    onClick:{                         
    btn1:function(e, id, node){
        alert("button clicked row ="+id.row + " |col = "+id.column);
    },
    btn2:function(e, id, node){
        alert("message 2")
    }
}