Dojo 1.9: Dijit: Disabling option items in a dijit/Form/FilteringSelect that was populated using a store

Question

I am trying to disable option items in a dijit/Form/FilteringSelect control that is populated using a store.

Following this guide: http://dojotoolkit.org/documentation/tutorials/1.9/selects_using_stores/

It seems to be only possible if the Select control was created without using a store. I have deduced this from debugging the FilteringSelect example. I have tried two methods to disable an item:

1. Following the advice in this thread: How to disable a single option in a dijit.form.Select?. However, the "stateStore" store object in the FilteringSelect example does not have an 'options' property.

2. Attempting to access the appropriate element in the store object. For example, in the FilteringSelect example, I do the following:

   var optionItem = stateStore.get("AZ");
   optionItem.disabled = true;
   stateStore.put(optionItem);
   select.startup();
   

Neither method seems to work, so it seems that the only way to have disabled items in Dijit Select controls is to use the options property instead. Thanks in advance for a solution!

Answer 1

There is a difference between the data in your store (which is in fact the business data) and your rendered data (containing view logic). If you use a store, you're actually feeding your rendered data with your store.

To alter the rendered data (= the options in your select), you need to use the getOptions(idx) method of the dijit/form/Select as you can read in the API documentation. To alter the disabled state of the option you can use:

registry.byId("mySelect").getOptions(myId).disabled = true;

That's all you need. Changing the store data won't help, since it represents business data, not view data. I also made an example JSFiddle where the second option is disabled.

Answer 2

for dojo 1.10 and upto 1.x latest version, you need to add a line of code to update the selection UI:

registry.byId("mySelect").getOptions(myId).disabled = true;
registry.byId("mySelect").updateOption(myId);