topic Re: seting dijit radio button programatically in Web AppBuilder Custom Widgets Questions

setting dijit radio button programatically

MichaelLev — Wed, 28 Oct 2020 17:31:15 GMT

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.

Re: seting dijit radio button programatically

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:36:49 GMT

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>‍‍

this.valueRadio.checked = false;‍

Re: seting dijit radio button programatically

MichaelLev — Wed, 28 Oct 2020 20:43:31 GMT

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?

Re: seting dijit radio button programatically

RobertScheitlin__GISP — Wed, 28 Oct 2020 20:46:10 GMT

Michael,

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

Re: seting dijit radio button programatically

MichaelLev — Wed, 28 Oct 2020 20:59:02 GMT

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

Re: seting dijit radio button programatically

RobertScheitlin__GISP — Wed, 28 Oct 2020 21:07:26 GMT

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

Re: setting dijit radio button programatically

MichaelLev — Thu, 29 Oct 2020 09:19:47 GMT

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.

Re: setting dijit radio button programatically

KenBuja — Sun, 12 Dec 2021 07:36:52 GMT

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);‍‍

Re: setting dijit radio button programatically

MichaelLev — Thu, 29 Oct 2020 12:58:42 GMT

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.

Re: setting dijit radio button programatically

MichaelLev — Thu, 29 Oct 2020 13:17:26 GMT

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.