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

1.1k Views Asked by At

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

enter image description here

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

1

There are 1 best solutions below

0
On

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);