dijit.form.filteringselect dynamically change options

Question

I have a dijit.form.FilteringSelect component and I want to change the options dynamically. But I get the store from the dijit.form.FilteringSelectwith its store property; there is no setter function in the store. (It may be a dojo.store.Reader)

So how can I change the option of dijit.form.FilteringSelect? Should I change it directly with DOM? Is there any way to update the store behind dijit.form.FilteringSelect?

Answer 1

there is two type of data store in dojo:

1. dojo.data.ItemFileReadStore - readonly datastore

2. dojo.data.ItemFileWriteStore - extension of ItemFileReadStore that adds on the dojo.data.api.Write

   In your case, you should use ItemFileWriteStore - it provides functions for modifying data in store.

E.g.:

You have array of countries and you want to use it in filtering select:

[{
   abbr: 'ec',
   name: 'Ecuador',
   capital: 'Quito'
},
{
   abbr: 'eg',
   name: 'Egypt',
   capital: 'Cairo'
},
{
   abbr: 'et',
   name: 'Ethiopia',
   capital: 'Addis Ababa'
}]

First of all you will need to create data store js-variable for ItemFileWriteStore.

<script>
   dojo.require("dojo.data.ItemFileWriteStore");
   dojo.require("dijit.form.FilteringSelect");

   var storeData = {
       identifier: 'abbr',
       label: 'name',
       items: //YOUR COUTRIES ARRAY
       }
</script>

Next step - declare filtering select and itemFileWriteStore in html markup:

<div dojotype="dojo.data.ItemFileWriteStore" data="storeData" jsid="countryStore"></div>
<div dojotype="dijit.form.FilteringSelect" store="countryStore" searchattr="name" id="filtSelect"></div>

And finally create special functions for add/delete/modify items in filtering select:

Add New Item:

function addItem() {
   var usa = countryStore.newItem({ abbr: 'us', name: 'United States', capital: 'Washington DC' });
}

I hope here is all clear. Only small note: "identifier" field ("abbr" in our case) must be unique in store

Delete Items - e.g. removing all items with name "United States of America"

function removeItem() {

   var gotNames = function (items, request) {
      for (var i = 0; i < items.length; i++) {
         countryStore.deleteItem(items[i]);
      }
   }

   countryStore.fetch({ query: { name: "United States of America" }, queryOptions: { ignoreCase: true }, onComplete: gotNames });   
}

As you can see i have created query, that finds items with name == "United States of America" in data store. After the query is executed, function "gotNames" will be called. function gotNames removes all items that query return.

And last function - Edit Item

it is similar to the delete function. only one difference:

you should use setValue() method of itemFileWriteStore for changing item property:

countryStore.setValue(item, "name", newValue); 

Here - page with working example

Answer 2

I solved the same problem with this sentences, hope it helps someone.

For Dojo version < 1.7

dijit.byId('myId').store.root[{index of select}].innerText='New text';

dijit.byId('myId').store.root[{index of select}].value='New Value';

For Dojo version >= 1.7

dijit.byId('myId').store.data[{index of select}].name='New Text';

dijit.byId('myId').store.data[{index of select}].value='New Value';

To change displayed text (current selected)

dijit.byId('myId').textbox.value='New text';

You can see this properties using Firebug or another debug console.