CODEWITHSUNDEEP
polymer-1.0paper-elements
Subrata Sarkar
Subrata Sarkar

Reputation: 3064

Polymer 1 paper-radio-group issue

I am trying to bind a set of paper-radio-button using a paper-radio-group. Here is my code in Index.html:

<paper-card heading="Radio button group binding">
  <div class="card-content">
    <h4>Which writer you like the most?</h4>
    <paper-radio-group>
      <radio-group-binder data='[{"name": "William Shakespere", "value": "ws"}, {"name": "Arthur Conan Doyale", "value": "cd"}, {"name": "Shidney Sheldon", "value": "ss"}]'>
      </radio-group-binder>
  </paper-radio-group>
  </div>
</paper-card>

My custom element looks like this:

<template>
  <template is="dom-repeat" items="{{data}}">
     <paper-radio-button name="{{item.value}}">{{item.name}}</paper-radio-button>
  </template>

Data is binding fine but I can select more than one radio button inside the group. What am I doing wrong here?

I attached a screenshot of how it is behaving now. I need to able to only select one option at a time in this radio-button-group.

enter image description here

Upvotes: 1

Views: 896

Answers (2)

Srikanth
Srikanth

Reputation: 836

Actually selected={{button}} will store the name/value of the selected radio-button into variable button. so that you can use it later if you want. As far as your question "Selecting only one radio button inside the radio group," I did few change like below and it worked for me. Please give it a try:

Custom element:

<dom-module id="radio-group-binder">
<template>
 <paper-radio-group selected="{{button}}" attr-for-selected="name">
  <template is="dom-repeat" items="{{data}}">
     <paper-radio-button name="{{item.value}}">{{item.name}}</paper-radio-button>
  </template>
 </paper-radio-group>
</template>

Index.html:

 <radio-group-binder data={{data}}></radio-group-binder>
    <script>
   var data = [{"name": "William Shakespere", "value": "ws"}, {"name": "Arthur Conan Doyale", "value": "cd"}, {"name": "Shidney Sheldon", "value": "ss"}];
   document.querySelector('radio-group-binder').data = data; 
    </script>

You may need add "selected" in both the places. Can you try something like below?

<radio-group-binder selected="{{button}}" data= yourdata....    

<paper-radio-group selected="{{button}}" attr-for-selected="name">

Upvotes: 0

Neil John Ramal
Neil John Ramal

Reputation: 3734

You need to define attr-for-selected to refer to the attribute it needs to group.

<paper-radio-group attr-for-selected="name">

Upvotes: 1

Related Questions