topic Re: dijit/form/Select dynamically created change Event in Web AppBuilder Custom Widgets Questions

dijit/form/Select dynamically created change Event

NadirHussain — Tue, 12 Feb 2019 12:03:36 GMT

Dear All,

i have more than 20 dijit/form/Select on my widget.some time user select only 2 and some time 5 and some time all 20.All are dynamically created.i dont want to write the change event for all dijit/form/Select controls one by one.I want there should be one change event that should i call for all and after this i check the ID of the dijit/form/Select control and call the proper function according to ID.in jquery i have performed this.But in dojo and custom widget in web app builder,i dont know how to acheive this task.if this is possible how to to perform.Thanks in advance.

Re: dijit/form/Select dynamically created change Event

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:58:30 GMT

Nadir,

Sure that is easy in dojo too.

      this.SourceCombo.watch('displayedValue', lang.hitch(this, this.cbChangedHandler, "SourceCombo"));
      this.TargetCombo.watch('displayedValue', lang.hitch(this, this.cbChangedHandler, "TargetCombo"));

    cbChangedHandler: function (who, property, oldValue, newValue) {
      console.info(newValue, who);
    },‍‍‍‍‍‍‍‍‍‍‍‍

Re: dijit/form/Select dynamically created change Event

NadirHussain — Tue, 12 Feb 2019 15:08:37 GMT

Dear Robert this.SourceCombo.watch('displayedValue', lang.hitch(this, this.cbChangedHandler, "SourceCombo"));

I have 20 digit.form.select. All of them i create at runtime.the above line i have to write 20 times.in jquery i just call change event with some class name once.Any of combobox i change select value this event call.this i get the id of combobox and after this i call my buissness function.In this function my user create comboboxes runtime some time 2 some time 5 and some more than 10.here sourcecombo is the id of combo.but i want some generalise way.i dont want to put the name of combo everytime.i want some help like i explain to you.

Re: dijit/form/Select dynamically created change Event

RobertScheitlin__GISP — Tue, 12 Feb 2019 15:16:09 GMT

Nadir,

If you are creating the filteringselect dijits at runtime then I don't see how you would have to add that line 20 times. You just add the watch to the dynamic creation of your dijit...

Re: dijit/form/Select dynamically created change Event

NadirHussain — Tue, 12 Feb 2019 15:36:05 GMT

Dear Robert

domconstruct.create("rd"+(n-1), {innerHTML:"<input type=radio name=AndOR"+(n-1)+" "+"id="+"radioAnd"+(n-1)+" "+"Checked value=And/> <label for=radioAnd>And</label>"
+"<input type=radio name=AndOR"+(n-1)+" "+"id="+"radioOr"+(n-1)+"value=OR/> <label for=radioOr>OR</label>"
+"<select id=cmbSelect"+(n-1) + "data-dojo-type=dijit/form/Select style=width:310px;height:25px;margin-top:10px;margin-left:10px;>"
+"<option value=TN>Tennessee</option>"
+"<option value=VA selected=selected>Virginia</option>"
+"<option value=WA>Washington</option>"
+"<option value=FL>Florida</option>"
+"<option value=CA>California</option>"
+"</select>"
+"<input data-dojo-type=dijit/form/TextBox id=txtDistance"+(n-1)+" "+"style=width:55px;height:25px;margin-left5px;border:solid;visibility:hidden;/>"
+ "\n"

the above code i am calling on button click event.some time user click once some time 5 and some time more than 10.how to call this event

this.SourceCombo.watch('displayedValue', lang.hitch(this, this.cbChangedHandler, "SourceCombo"));.

what will be the source combo.i think i should first get the dijit/form/Select from the widget in an array.then i get one by one in var and then apply the change event.,

Re: dijit/form/Select dynamically created change Event

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:58:32 GMT

Nadir,

Wow, you really have a strange way of doing things in your code. Here is how I would create a dijit programatically in code.

In my Widget.js

...      
      this.operLayerInfos.traversal(lang.hitch(this, function(layerInfo) {
        layerInfoArray.push(layerInfo);
      }));
      for (var k = 1; k < layerInfoArray.length; k++) {
        lyrArray.push({
          "id": layerInfoArray[k].id,
          "title": layerInfoArray[k].title
        });
      }
      var myStore = new Memory({
        data: lyrArray
      });
      this.createSelect("sourceCombo", myStore);
      this.createSelect("TargetCombo", myStore);   
...

    createSelect: function(id, myStore) {
      var node = domConstruct.create("div");
      domConstruct.place(node, this.selectCont);
      var filteringSelect = new FilteringSelect({
        id: id,
        store: myStore,
        searchAttr: "title"
      }, node)
      filteringSelect.startup();
      filteringSelect.watch('displayedValue', lang.hitch(this, this.cbChangedHandler, id));
    },

    cbChangedHandler: function (who, property, oldValue, newValue) {
      console.info(who, property, oldValue, newValue);
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

in my Widget.html

<div>
...
	<div data-dojo-attach-point="selectCont"></div>
</div>‍‍‍‍

Re: dijit/form/Select dynamically created change Event

NadirHussain — Wed, 13 Feb 2019 05:46:53 GMT

Dear Robert

i understand your code.But in my code on each click i create one row of three objects.one radio group of two buttons,one combobox and one text box visibility is hidden.it will visible true and false on selection box options.can you help me how programatically i can create this row of three objects.

Thanks in advance

Re: dijit/form/Select dynamically created change Event

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:58:35 GMT

Nadir,

Here is what you are wanting.

Style.css

.tbInput {
  width: 55px;
  height: 25px;
  margin-left: 5px;
  visibility: hidden;
  border: solid;
}

.cbSelect {
  width: 310px;
  height: 32px !important;
  margin-left: 10px;
}

.radioLabel {
  margin-left: 3px;
  margin-right: 5px;
}

.formRow {
  line-height: 32px;
  margin-top: 10px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Widget.js

...
      this.createRow("sourceCombo", myStore, 1);
      this.createRow("TargetCombo", myStore, 2);
    },

    createRow: function(id, myStore, index) {
      var pnode = domConstruct.create("div", {class:"formRow"});
      domConstruct.place(pnode, this.selectCont);
      var node = domConstruct.create("div", {style:{float:"left"}});
      domConstruct.place(node, pnode);
      var node2 = domConstruct.create("div", {style:{float:"left"}});
      domConstruct.place(node2, pnode);
      var node3 = domConstruct.create("div");
      domConstruct.place(node3, pnode);
      var node4 = domConstruct.create("div");
      domConstruct.place(node4, pnode);
      var radio = new RadioButton({
        checked: true,
        value: "And",
        name: "AndOr_" + index,
      }, domConstruct.create("div"));
      radio.startup();
      domConstruct.place(radio.domNode, node);

      var label = domConstruct.create("label", {
        innerHTML: "And",
        for: radio.id,
        class: "radioLabel"
      }, node);

      var radio2 = new RadioButton({
        checked: false,
        value: "Or",
        name: "AndOr_" + index,
      }, domConstruct.create("div"));
      radio2.startup();
      domConstruct.place(radio2.domNode, node2);

      var label = domConstruct.create("label", {
        innerHTML: "Or",
        for: radio2.id,
        class: "radioLabel"
      },node2);

      var filteringSelect = new FilteringSelect({
        id: id,
        store: myStore,
        searchAttr: "title",
        class: "cbSelect"
      }, node3);
      filteringSelect.startup();
      filteringSelect.watch('displayedValue', lang.hitch(this, this.cbChangedHandler, id));

      var textInput = new TextBox({
        id: "TextInput" + index,
        class: "tbInput"
      }, node4);
      textInput.startup();
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍