PDA

View Full Version : Combobox Filtering based on Multiple Value selection



pra123@
18 Mar 2013, 9:09 AM
There are 2 comboxes 'combobox1 and combobox2'.
When I select a value in first combox, i need to filter the values in second based on the first combobox key.


i have applied the following code...
var value1 = win.down('#combobox1').getValue();
win.down('#combobox2').store.clearFilter();
win.down('#combobox2').store.filter([{property:'testkey',value:value1}]);


It works fine when i select single value in the combobox.


But if i select multiple values in the first combobox, filtering is not working.


i know that multiple values are retrieving by comma seperator.


Can you please someone tell me how to set the multiple values to filtering?

Farish
18 Mar 2013, 10:27 AM
i dont know if there is a direct way to do this. one workaround would be to separate the comma based values and then put a loop to apply filter with these values. e.g.


var values = value1.split(",");
for(var i=0; i<values.length; i++)
win.down('#combobox2').store.filter([{property:'testkey',value:values[i]}]);

pra123@
18 Mar 2013, 9:41 PM
Thanks for your reply.
I have already tried this way.
values = win.down('#combobox1').getValue();
Here values are in array type, So i can't use split method to retrieve it.
for (i = 0; i < values.length; i++)
win.down('#combobox2').store.filter([{property:'testkey',value:values[i]}]);
When I am doing this way, then filtering is not working and combobox2 is not showing any values.
Is there any other way which i can use it?

Farish
18 Mar 2013, 11:54 PM
If you already get an array from getValues(), then there is no need to use split. thats fine then.

What is possible is that when multiple filters are applied, there are no records matching all those filters. In Firebug, put a breakpoint on the line where you are applying the filter. then when you hit the breakpoint, check the records in the store. At each iteration, keep a track of the records and see whats going on.

pra123@
19 Mar 2013, 5:05 AM
Thanks for your quick reply.
I am doing like this
values = win.down('#combobox1').getValue();
for (var i = 0; i < values.length; i++)
{
win.down('#combobox2').store.filter([{property:'testkey',value:values[i]}]);
console.log('After applying ' + (i+1) + ' time filtering, records in the store = ' + win.down('#combobox2').store.count());
}
If I am selecting two values in combobox1, I am getting 'console.log()' as follows
After applying 1 time filtering, records in the store = 2
After applying 2 time filtering, records in the store = 0
So, Here we can see after applying second time filtering, no of records in store is zero.
Please tell me, How can i resolve it?

Farish
19 Mar 2013, 5:23 AM
This doesnt have anything to do with multiselect then. that part is working fine.

the filtering will of course depend on the data you have. If I have a string field (say 'name') in my model and say I filter first with "a", this will cause only those records to remain in the store's data array where 'name' value starts with "a". Now if I apply another filter for the same field with "b", there will be no records in the data array! this is because I am filtering records having name starting with "a" with "b" now and there can be none! So you need to check the type of data you have and what you actually want to achieve with filtering. the filter is kind of an "AND" operation. so in this example after the two filters have been applied, the overall filter will be

records.get('name') begins with "a" && records.get('name') begins with "b"

and this will be none.

pra123@
19 Mar 2013, 5:48 AM
Thanks Farish.
I got it how the filter is working.
Basically i want to filter second combobox based on the multiple selection in first combobox.
If we take a scenario what you have explained..
If i select 'a' and 'b' in first combobox, i want to display the record in second combobox which is starting with 'a' as well as starting with 'b' also.
How can i achieve this?

Farish
19 Mar 2013, 6:26 AM
you can use a filter function:


var nameFilter = new Ext.util.Filter({
filterFn: function(item) {
if(item.data.name == "a" || item.data.name == "b") // return true for records having name "a" or "b"
return true;
}
});
store.filter(nameFilter);

In your case, you have to have an if condition which checks that the name starts with "a" or "b" and is not exactly "a" or "b". returning true will keep this record in the data array of the store. other records will be skipped.

pra123@
19 Mar 2013, 6:44 AM
Now it's working.

Thanks a lot Farish.