CODEWITHSUNDEEP
bindingmodeldojo
Ilia G
Ilia G

Reputation: 10221

Bind property to a radio group value

Lets say I have a group of radio buttons:

<span data-dojo-type="Scripts/Framework/UI/Form/RadioButton" data-dojo-props="value:1,name:'Foo'"></span>
<span data-dojo-type="Scripts/Framework/UI/Form/RadioButton" data-dojo-props="value:2,name:'Foo'"></span>
<span data-dojo-type="Scripts/Framework/UI/Form/RadioButton" data-dojo-props="value:3,name:'Foo'"></span>

How do I bind this to a model property Foo so that its value is set to the value of the selected radio button? I tried binding it to the checked property and then applying transform, but ran into issues with overwriting model value when button is being unchecked.

<span data-dojo-type="Scripts/Framework/UI/Form/RadioButton"
data-dojo-props="value:3,checked:at('rel:', 'Foo').transform({format:function(x) { return x == this.value; }, parse:function(x) { return x ? this.value : /* ok, now what??? */ }})"
></span>

It feels like this should be way simpler than this to begin with...

Upvotes: 1

Views: 679

Answers (3)

Jeremy
Jeremy

Reputation: 3538

dojox/form/CheckMultiSelect widget provides the capabilities to get and set the selected radio button of a group easily.

If you take the example code in the tutorial for radio buttons and then experiment with setting and getting the value from the group, you will soon see that you can then start binding the value of a model state.

I had to read through the API docs for the widget to expand on the tutorial. To get and set the value of the selected radio in a group I used the standard get("attr")/set("attr", value) with the CheckMultiSelect widget...

// NOTE: make sure you have imported the dijit/registry module
// If my multi select widget has the id "multi".

// get selected value
var selectedValue = registry.byId("multi").get("value");

// set selected value
registry.byId("multi").set("value", newValue);

// getting a handle on all radio buttons
var options = registry.byId("multi").get("options");

The CheckedMultiSelect widget also extends _FormSelectWidget so you can do everything with stores as you'd expect from a select based widget, which may help you bind your model.

Upvotes: 2

twil
twil

Reputation: 6162

You can use query('selector').on('event', callback) like so

query('.claro [type="radio"]').on('change', function(event) {
    textBox.set('value', event.target.id);
});

See http://jsfiddle.net/542uw/ for full example.

NB: basicaly you user name attribute to group radio buttons.

Upvotes: 0

Matt R
Matt R

Reputation: 734

You can use "watch" to watch the value of a widget for changes. First argument is the value to watch and the second is a function that is called when that value changes.

radioButton.watch("checked", updateFoo);

Here is a fiddle showing it on the native dijit radio button.

http://jsfiddle.net/a2SEP/2/

Upvotes: 0

Related Questions