Dojo RadioButton, setup a group programmatically

Question

I have a custom widget 'MyWidget' with three radion buttons I would like to be of the same "group". If I set a 'name' attribute in the radiobuttons in the template file, then problem is when I create multiply 'MyWidget' widgets then all radiobuttons share the same group.

I tried to put the 'name' of the radio button with

radioWifget.set('name', some_value) 

without success, and also going direct to DOM code with:

dojo.query("INPUT[type='radio']", this.domNode).forEach( dojo.hitch(this, function(inputNode){
    inputNode.name = 'perill_'+this.id;
}));

The second form sets the name attrbitue but it doesn't works as a group.

Any help.

Thanks in advance.

---

I apologize because I found the answer by myself.

I will risk someone vote me negatively but prefer to put the solution here because maybe can help someone other than me.

The solution is the radio buttons in the template of "MyWidget" must be enclosed in a 'dijit.form.Form' widget. This way every 'MyWidget' will have its own radiobuttons groups.

Answer 1

I would go for a custom FormValueWidget and mix _WidgetsInTemplateMixin, like this :

declare([
    "dojo/_base/declare",
    "dijit/form/_FormValueWidget",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/form/RadioButton",
    "dojo/domReady!"
], function (declare, _FormValueWidget, _WidgetsInTemplateMixin) {

    return declare([_FormValueWidget, _WidgetsInTemplateMixin], {
        templateString: "<div><h2>Group of radioBtns '${name}'</h2>" +
            "<input type='radio' ${!nameAttrSetting} data-dojo-attach-point='focusNode' data-dojo-type='dijit/form/RadioButton' checked='checked' data-dojo-props='value:\"radio1\"'></input>" +
            "<input type='radio' ${!nameAttrSetting} data-dojo-type='dijit/form/RadioButton' data-dojo-props='value:\"radio2\"'></input>" +
            "<input type='radio' ${!nameAttrSetting} data-dojo-type='dijit/form/RadioButton' data-dojo-props='value:\"radio3\"'></input>" +
            "<input type='hidden' value='${value}'/>" +
            "</div>",
        _getValueAttr : function() {
            var selectedRadio = registry.findWidgets(this.domNode).filter(function(w){
                return w.get("checked");
            }).pop();
            return selectedRadio.get("value");
        }
    });
});

See an example here : http://jsfiddle.net/psoares/FdMEU/