How to catch onchange event of radio button that is present in every row of single table in spark ui toolkit

Question

Iam using spark ui table and I have radio button group (Yes and No)and teaxtarea in each row.I have multipe rows.

My requirement is that if click on Yes ,then the textarea should be hidden only in that row.I wrote below code in load

var table = page.ui.get('/tablecv1/Table1');
var radiobtn = table.ui.getSibling('/tablecv1/Table1/Radio_Button_Group1');
radiobtn._instance.input.onchange = function(event){
    if(radiobtn.getData() == "yes"){
        radiobtn.ui.getSibling("Text_Area1").setVisible(true)
    }
    else{
        radiobtn.ui.getSibling("Text_Area1").setVisible(false,true)
    }
}

As of the now the code is working only for the first row.But for the secomnd row,on change of button it is not even going inside that function,the reason may be the control name is same for all.How can I handle this case where I should be able to click radio btn in any row and specific textarea should be hidden

Answer 1

You could pass the target radio button to the inline function. That would be like this:

this.setAreaVisibility = function(radiobtn) {
    radiobtn._instance.input.onchange = function(event){
        if(radiobtn.getData() == "yes"){
            radiobtn.ui.getSibling("Text_Area1").setVisible(true)
        }
        else{
            radiobtn.ui.getSibling("Text_Area1").setVisible(false,true)
        }
    }
}

Then on "On Change" event of the radio button element you should call this function like this:

me.ui.invoke("setAreaVisibility", me);