I have a kendo grid with a column consisting of radio buttons.
I want to make the radio buttons act as radio buttons(check only 1) and get the selected 1.
Here is a sample Demo
You were pretty close. First a few things about radios:
Radio buttons are grouped using the name attribute
Radio buttons are bound to labels via the for attribute on the label element matched with the id attribute on the radio button
The problem with your code is that all radios have the same id, which is why clicking any radio button toggles the first one ... because the first element found with that id is grabbed, with the assumption that there'd only be one.
In order to fix this, you need a unique id for each radio button, and you can do that by referencing the EmployeeID in the data source using the #: EmployeeID# notation, as exemplified in the docs
Therefore your template would look like this:
template: '<input type="radio" name="customer" id="customer_#: EmployeeID#" class="k-radio"><label class="k-radio-label" for="customer_#: EmployeeID#"></label>'
Please find working example here: https://dojo.telerik.com/aRuQubep/5
Hope this does the job :)
Related
Am currently learning Selenium on my own . i am trying to automate the below demo website https://itera-qa.azurewebsites.net/home/automation.
There is a section of radio button to select gender. i was trying to find the number of elements under that particular section . Page has another section of radio button too
If u notice the label gender it is not directly associated to the parent above ]1
Please help me to find the xpath so that i can find the number of radio buttons in the particular section rather than that of the whole page . i spent lot of time in tweaking this
Well, to select the Female radio button you should click on the label element above it. The Xpath for that label element is
//label[.//input[#id='female']]
or
//input[#id='female']/..
(Both are correct).
Similarly, to select Male radio button you can use
//label[.//input[#id='male']]
or
//input[#id='male']/..
Try below xpath to count the radio button under Gender section.
//div[contains(#class,'body-content')]/div[3]//input[#type='radio']
Below code is in python, but you should be able to understand what I am doing
driver.implicitly_wait(10)
driver.get("https://itera-qa.azurewebsites.net/home/automation")
time.sleep(5)
radio = driver.find_elements_by_xpath("//div[contains(#class,'body-content')]/div[3]//input[#type='radio']")
print(len(radio))
Output:
3
Split the xpath to understand.
//div[contains(#class,'body-content')]- points the entire page,
//div[contains(#class,'body-content')]/div - gives all 6 parts of the form.
//div[contains(#class,'body-content')]/div[3]` points to the 3rd `div` where the required radio buttons exists and
//div[contains(#class,'body-content')]/div[3]//input[#type='radio']` points to `input` tags with `type` `radio` only. Replace `radio` with `checkbox` to point only on the checkboxes
Suppose you want radio buttons of `Years of experience in test automation` below is the xpath. Its the 5th `div` tag in the entire page.
//div[contains(#class,'body-content')]/div[5]//input[#type='radio']
We have a section of our website where users can submit data. This section allows users to add additional entries and submit them all at once. We had to rewrite this section after we updated the version of AngularJS the site used to the most recent. When a user first accesses the page, the first entry is ready and available for the user to fill out. They can click on a button and it will add another entry. These entries can be navigated via tabs. Once a second entry has been added and a radio button selected, the selected radio button on the first entry is deselected in the view. If you go back to the first entry and re-select a radio button, any selected radio button on the second entry is de-selected. Checking the model, the values are still stored and if the user saves, then the correct values are saved to the database. I don't know if it matters in this case, but the radio button options are populated via data from the database. Everything in the controller appears to be working correctly.
Here is a concentrated bit from the template:
<uib-tabset active="activeTabIndex" ng-show="!nothingToShow && showThisStuff">
<uib-tab ng-repeat="entry in things.items" active="{{entry.active}}" ng-model="entry">
<uib-tab-heading>Heading Here</uib-tab-heading>
<div>
<!-- some other stuff here -->
<div>
<label>Label Here</label>
<br />
<div ng-repeat="input in inputTypes">
<input name="inputTypes" type="radio" data-ng-value="input.theTypeId" ng-model="entry.theTypeId">
<label>{{input.localizedName | translate}}</label>
</div>
</div>
<!-- More stuff here-->
</div>
</uib-tab>
</uib-tabset>
I have a feeling that I'm not doing something right since ng-repeat is involved, but I feel that since the selection points to entry that multiple entries should be isolated from each other. Very well could be wrong, though.
Here's a list of things I've looked at to try and resolve this issue:
AngularJS - ng-repeat multiple radio button groups, values to array
AngularJS - Using ng-repeat to create sets of radio inputs
AngularJs: Binding ng-model to a list of radio buttons
AngularJS multiple radio options
Selected value in radio button group not retained in angularjs
How can I get the selected values of several radio buttons to be bound to an object (model)?
If I understand you correctly, you try to set multiple selection instead of single selection, do you?
Try one of the following: either remove the 'name' attribute from the input, or use $index in order to give every input its unique name (example: name="inputTypes_{{$index}}").
I have a flow of three div working with each other (and 3 arrays)
The idea is to select some options on the first div (from the first array), those options are passed inside the second one (and the second array).
I have an ng-repeat inside the second div which displays the selected options with, for each one, four radio buttons.
The radio buttons have an ng-click value which will add the option associated to the radio button value to the third array and will allow to sort the options by the different radio buttons checked.
DIV1 DIV2 DIV3
|option1| |option2| radio1 : option2
|option2| oradio1 oradio2 oradio3 radio3 : option4
|option3| --> |option4| -->
|option4| oradio1 oradio2 oradio3
The problem comes from my radio buttons, I've tried to change their name / values / ng-model change values for ng-values and I can't find a way to make it work.
Either I have all my radio buttons changing at the same time or only on radio button line working at a time or all object having the radio value being updated...
I have an idea of what's going on, my scope is updating everything because my ng-model is the same or values are the same but I can't find a way to make it work...
I have spend my day on it... so it's time to get help :)
Here is a plunker of the code I have (I've made a lot of change like I said) but the idea is here...
http://plnkr.co/edit/jElDW1aUAv3k4cqou54y?p=preview
Thank you !
<EDIT>
The idea of option may not be very understandable just imagine you have some buttons for people
Mary
Chloe
David
etc.
The radio buttons are team bleu / red / yellow
I select the person I want in the first panel attribute them a team in the second one and display the person per team in the third one :)
I don't know if this can be helpful for you.
I've made a fiddle based on your code.
Please check this.
$scope.addPerson = function(personName){
var obj = {};
obj['name'] = personName;
$scope.peopleArr.push(obj);
$scope.personName = '';
};
Is this far from your intent?
The objective is to combine the rating provided here in example:
http://angular-ui.github.io/bootstrap/#/rating
w/ the collapse here:
http://angular-ui.github.io/bootstrap/#/collapse
Is it possible to make use the rating implementation and have each star binded to a unique collapse and message.(i.e. clicking 1 star collapses a message saying "you selected "{{rating}}" star!"
I was trying to use ng-switch at first, but any suggestions would be appreciated.
Does something like this suit your needs ?
http://plnkr.co/edit/cGxCRDWb3OX5RzJjSwUV?p=preview
I just made the collapse condition equal to rating ng-model so the message only shows when there is a rating selected.
I have a list of radio buttons using ng-repeat.
When I initially load the page and select on the last radio button, the button on it's side gets selected.
This only happens for the first time, i.e. if I click on the last button a second time, it is selected correctly.
<input type="radio" name="rb" value="{{rbCollection.name}}" data-ng-click="open(name)" data-ng-model="Ctrl.selection">
Check this so.
The problem is that ng-click fires before the ng-model code that updates the scope. If you change it to use ng-change, that will fix it. You also need to add ng-change to your text box to update the scope as the user types.