Dijit.form.filteringselect Dynamically Change Options
Solution 1:
there is two type of data store in dojo:
- dojo.data.ItemFileReadStore - readonly datastore
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:
<divdojotype="dojo.data.ItemFileWriteStore"data="storeData"jsid="countryStore"></div><divdojotype="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"
functionremoveItem() {
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);
Solution 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.
Solution 3:
the properties 'urlPreventCache:true, clearOnClose:true' will force the store to be reloaded
<div data-dojo-type="eco/dojo/data/ItemFileReadStore"data-dojo-props='url:"../json/GetClients", urlPreventCache:true, clearOnClose:true'data-dojo-id="clientStore" ></div>
<div id=proposalClient data-dojo-type="dijit/form/FilteringSelect"data-dojo-props="store:clientStore, searchAttr:'clientName', required:'true', pageSize:'15'" ></div>
and then, on event/callback/handler where you need/want to reset the values just do this
function func-name() {
clientStore.url = "../json/GetClients?param=<your-new-search-conditions>";
clientStore.close();
}
Post a Comment for "Dijit.form.filteringselect Dynamically Change Options"