htmldojodijit.layout

Radio Buttons in dojo framework


I have created a div, something similar to below. Which should create 2 radio button, each button having its independent value.

<div>
    <input type="radio" name="colors" value="green"
        data-dojo-type="dijit/form/RadioButton"> Green
    <input type="radio" name="colors" value="red"
          data-dojo-type="dijit/form/RadioButton"> Red
</div>

I need to create a controller, which on click, should call a function where i can write my relevant code.

I am new to Dojo framework. Can anyone please help me out.


Solution

  • In the html declare:

    <input id="red_radio" />
    <input id="green_radio" />
    

    Then you could create a function like:

    require([
        "dojo/parser",
        "dijit/form/RadioButton",
        "dijit/form/Button", // used for example purpose
        "dojo/domReady!"
    ], function(parser, RadioButton){
    createRadios(domid, name, check, val) {
                    var radioOne = new RadioButton({
                        checked: check,
                        value: val,
                        name: name,
                        onChange: (a) => {
                            if (dijit.byId(domid).checked && dijit.byId(domid).value == 'red') {
                                //code when red
                            }
                            else if (dijit.byId(domid).checked && dijit.byId(domid).value == 'green') {
                                //code when green
                            }
                        }
                    }, domid);
                    radioOne.startup();
                },
    
    createRadios("red_radio", "colors", true, "red");
    createRadios("green_radio", "colors", false, "green");
    });
    

    call the function to create each radio, I hope this would help you, also you could see the documentation : https://dojotoolkit.org/reference-guide/1.10/dijit/form/RadioButton.html