Skip to Content

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 (23.6 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Dec 31, 2013 at 08:55 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 31, 2013 at 06:34 AM

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

    Add comment
    10|10000 characters needed characters exceeded