setting dijit radio button programatically

1936
9
Jump to solution
10-28-2020 10:31 AM
MichaelLev
Occasional Contributor III

I'm developing custom widgets for WAB (Develper Edtion) 2.17, Launchpad Theme, on 3D Scenes (ArcGIS API for javascript 4.17).

I need to switch programatically by javascript between the various items of a dijit radio button.

Widget.js has next code:

define([    ... 'jimu/dijit/RadioBtn', 'dijit/form/RadioButton'  ...

Widget.html has next lines as in attached screenshot

I'll appreciate help.

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

Although this is not in a WAB app, I set the radio button to checked using this syntax

<input id="radHigh" type="radio" data-dojo-type="dijit/form/RadioButton" name="resolution" value="high" />
var radioHigh = registry.byId("radHigh");
radioHigh.set("checked", true);

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Emeritus

This is the way I do it in my widgets.

HTML

<input type="radio" data-dojo-attach-point="valueRadio" checked="true" disabled title="${nls.valueTooltip}" />
<label data-dojo-attach-point="valueLabel" title="${nls.valueTooltip}">${nls.value}</label>

JS

this.valueRadio.checked = false;
MichaelLev
Occasional Contributor III

Dear Robert,

Thank you for answering. I tried it, but it does not work. I need to programatically flip the on/off status of the 2 radio buttons, and I can't. I even saw that the ".checked" property is undefined.

What am I missing?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michael,

  That is exactly how I do it in my code and html and it works fine.

MichaelLev
Occasional Contributor III

Maybe it's because mine is dojo radio button? (I just copied the way esri do in other wodgets)

Is there some relevant code in WAB widgets for modifying radio buttons status programatically?

Can I programatically immitate as if the user clicked?

Thanks

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

All I can tell you is that what I provided works.

MichaelLev
Occasional Contributor III

Dear Robert, thank you for the info.

I checked, and indeed if in the html (it is shown in the attached screenshot) I remove the data-dojo-type="dijit/form/RadioButton" 

(since you do not have it at all in your code) from the radio buttons,

then the screen reflects the new state of the radio buttons,

though I don't enter the "radio button "onClick" callback" and I have to call it manually from the program.

But I want the "look" of dojo radio buttons... ESRI use it in their code examples,

e.g. IntegratedMeshLayer modification

and I really need to be able to control the dojo radio buttons from within javascript.

Can you please instruct me how to achieve the same effect when I remain with dojo radio buttons?

Had this be done in some esri code so that I can see code example, or can you please point me to the relevant info how to do this for dojo radio buttons?

I will be thankful.

0 Kudos
MichaelLev
Occasional Contributor III

Dear Robert,

I tried to re-learn thoroghly what I googled about it, and at last I fully succeeded in setting dojo radio buttons programatically, by the first answer in stackOverflow -

Dojo Radiobutton - check one of them programatically

with this fiddle

In order to implement this idea, I replaced in the html the <fieldset> by <form data-dojo-type="dijit/form/Form" id="widgetFilterFormValueBy">

Thanks for telling me that this should be possible.

Note: This works, but finally I commented it and I'm using Ken Buja's way' which is simpler and shorter.

0 Kudos
KenBuja
MVP Esteemed Contributor

Although this is not in a WAB app, I set the radio button to checked using this syntax

<input id="radHigh" type="radio" data-dojo-type="dijit/form/RadioButton" name="resolution" value="high" />
var radioHigh = registry.byId("radHigh");
radioHigh.set("checked", true);
MichaelLev
Occasional Contributor III

Dear Ken Buja,

I have a "group" of 2 dojo Radio Buttons that I need to be able to control them manually.

Using the link I mentioned I used the id of the group and it worked well.

You suggested simpler way with less text, by using the id to of the specific button I want to check.

I tested it and it also works well!

Thank you very much!

Indeed I commented what I did before since yours is a simpler and shorter way.

0 Kudos