Radi button grouping in Table control : UI5

[sreehari_vpillai]

Dear Experts,

I am facing a problem in using radio buttons in UI5 table control.

My requirement is like , the table control is having 3 columns and all columns are radio buttons.. each row(have 3 radio button) radio button bust be a group. That is i should be able to select only 1 out of the three.

Problem : Now all the radio buttons in the table control are grouped . I am able to select only one radio button from the entire table control.

 table = new sap.ui.table.Table({
     editable : true ,
     id : "table" ,
     title : "My Sample table"
     });
     table.addColumn(new sap.ui.table.Column({
         label: new sap.ui.commons.Label({text: "First"}),
         template : question.bindProperty("text","question"),
         sortProperty: "question",
         filterProperty: "question",
         width: "100px",
            name : "question"
     }));
     table.addColumn(new sap.ui.table.Column({
         label: new sap.ui.commons.Label({text: "column 1"}),
         template : new sap.ui.commons.RadioButton({
              editable : true ,
              enabled : true ,
              id : "col1X" ,
              groupName : "G1"
              }).bindProperty("selected","col1"),
           width: "100px",
            name : "col1"
     }));
     table.addColumn(new sap.ui.table.Column({
         label: new sap.ui.commons.Label({text: "column 2"}),
         template: new sap.ui.commons.RadioButton({
              editable : true ,
              enabled : true ,
              id : "col2X" ,
             groupName : "G1"
              }).bindProperty("selected","col2"),
            width: "100px",
            name : "col2"
     }));
     table.addColumn(new sap.ui.table.Column({
         label: new sap.ui.commons.Label({text: "column 3"}),
         template: new sap.ui.commons.RadioButton({
              editable : true ,
              enabled : true ,
              id : "col3X" ,
             groupName : "G1"
              }).bindProperty("selected","col3"),
         width: "100px",
            name : "col3"
     }));

    var aData = [{question : "Question 1",col1 : false , col2 : true , col3 : false},
                 {question : "Question 2",col1 : false , col2 : false , col3 : true},
                 {question : "Question 3",col1 : true , col2 : false , col3 : false}];
     var oModel = new sap.ui.model.json.JSONModel();
     oModel.setData({modelData: aData});
     table.setModel(oModel);
     table.bindRows("/modelData");

Please help.

Regards,

Sreehari

[t_kondepudi · Accepted solution]

Hi Sheehari,

For this issue you need to bind another property called "groupName" to the template.

table.addColumn(new sap.ui.table.Column({ 

          label: new sap.ui.commons.Label({text: "column 2"}), 

          template: new sap.ui.commons.RadioButton({ 

               editable : true , 

               enabled : true , 

               id : "col2X" , 

//             groupName : "G1" 

               }).bindProperty("selected","col2").bindProperty("groupName","question"), 

             width: "100px", 

             name : "col2" 

      })); 

In the above code I did binding groupName with question from the aData. So, for each row radio buttons group will be the question.

Hope this helps

Regards

Trimurthulu

[sreehari_vpillai · Accepted solution]

Hi Trimurthi,

it works like plum cake man.. thank a lot

Reagrds

Sreehari

[sreehari_vpillai]

Capture.jpg is the initial state of table control. Once i change any selection, only one radio button will be shown as selected.

[surendra_pamidi]

Hi Sreehari,

Give different group names for radio buttons.i.e. G1,G2,G3.

Regards,

Surendra.

[sreehari_vpillai]

Hi Surendra,

Thanks for the quick reply. Providing different group name for columns will group it column wise , what i am expecting is a row level grouping.ie., in a row only one row should be selected.

Regards,

Sreehari V Pillai