2

I have a select widget as follows

var pulseLen = new Select({
    id : "_PulseLength",
    label:"PulseLength",
    name: "pulseLength",
    value : 100,
    options: [
              { label : "5", value :"5" },
              { label : "10", value :"10" },
              { label : "30", value :"30" },
              { label : "100", value :"100" },
              { label : "300", value :"300" }
              ]
        });

Now based on the value selected in the above pulseLength widget i have to change the options of the below Select Range widget Its part of GUI validations.

   var range = new Select({
          id:"_Range",
          label:"Range"),
          name: "range",
          value: "5000",
        options: [
          { label : "5", value :"5000" },
          { label : "10", value :"10000" },
          { label : "20", value :"20000" },
          { label : "40", value :"40000" },
          { label : "80", value :"80000" },
          { label : "160", value :"160000" },
          { label : "260", value :"260000" }
          ]
});

API to generate dynamic options

 function getRangeArray(pulselen){

    var myOptions = "";
    var array = [0.5,1,2,5,10,20,40];
    console.log("Length got is " + pulselen);
    for(i=0;i<array.length;i++){
        var myTmp = "{label : '" + array[i] + "', value : '"+array[i] * 1000 + "'}";
        //console.log(myTmp);
        if(i==array.length-1){

            myOptions = myOptions + myTmp;
        }else{
            myTmp=myTmp+",";
            myOptions = myOptions + myTmp;  
        }

        //console.log(myOptions);
    }

    //console.log(myOptions);
    myOptions = "[" + myOptions + "];";
    return myOptions;
}

OnChange event of the pulseLength trying to change the options

  var newOptions = getRangeArray(value);
  console.log(newOptions);
  registry.byId("_Range").set("options", newOptions);

Sample Output

[{label : '0.5', value : '500'},
 {label : '1', value : '1000'},
 {label : '2', value : '2000'},
 {label : '5', value : '5000'},
 {label : '10', value : '10000'},
 {label : '20', value : '20000'},
 {label : '40', value : '40000'}];  
3
  • what version of Dojo?... especially if you have to hack widget internals, this really matters
    – jm0
    Commented Oct 16, 2014 at 17:40
  • The range select widget has a ; after "value:" and a ) after "label: Range". Is this just a typo? Commented Oct 16, 2014 at 17:56
  • Should i typecast it as objects ?? Im using DOJO 1.9
    – Shaik Md
    Commented Oct 16, 2014 at 18:07

1 Answer 1

4

There are a couple of things wrong here, I think. Like Thomas Kagan said in the comments, there are some typos:

The range select widget has a ; after "value:" and a ) after "label: Range".

Next, in your getRangeArray function, you are actually building a string! That's not necessary - you would have to parse it with JSON.parse to be useful. Instead, just build the array with objects directly:

function getRangeArray(pulselen){

    var myOptions = [];
    var array = [0.5,1,2,5,10,20,40];
    console.log("Length got is " + pulselen);
    for(i=0;i<array.length;i++){
        myOptions.push({label: array[i].toString(), value: "" + array[i]*1000 });
    }
    return myOptions;
}

Notice that I call toString() on the labels! Otherwise dijit/form/Select will throw some really weird errors - it expects the labels to be strings.

Also, although I don't know if it's necessary, you may have to call reset() on the _Range widget after updating its options:

registry.byId("_Range").set("options", newOptions).reset();

.. at least you used to, but it seems to work without it now.

Here's a fiddle with your code, and the updated parts: http://jsfiddle.net/ycrz1ug4/

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.