Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Radi button grouping in Table control : UI5

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

Capture.JPG (23591 B)
Tags:
replied

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

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question