PDA

View Full Version : [CLOSED] Combo Filter issue on type



amitpareek
Apr 07, 2017, 1:19 PM
Hi,

My issue is combo list is not filtered on typing text in combo.

I have three combo fields, on first combo select it will filter the other two combo store.
On second combo select, it will filter the third combo store.

Now what happens is, for second and third combo, if i type, it will filter the store data and sort it accordingly. (the data displayed in the combo list will be filtered)

But id i clear the store and try again for couple of times, it will not filter the store properly, means it shows the value to be selected but the store data which is shown in the list remains as it is. (the data displayed in the combo list is not filtered).

I am attaching the sample code here. I am using the DLL of version 2.5.x

As shown in image below it should hide records other than FQ 46
24901

As shown in image below it should hide records other than Package 34

24902

For couple of times it happened that it filters properly and when you click on trigger or clear filter, it stops working.
Also sometimes when you write something it wont filter, but when you click backspace, it starts filtering.
I just want it to be filtered as and when i type anything in combo.

Can you please look into the issue ASAP.

fabricio.murta
Apr 07, 2017, 6:21 PM
Hello @amitpareek!

Could you please provide the code sample in
tags? I see your attached txt file is pretty long, looks full of distractions (unrelated code to the problem happening), and also it has headers which suggest it needs a code behind file.

Understanding that you want the fastest answer possible, I'm just letting know that the way you provided the test case is not going to help us help you in a timely manner. Usually simplified and short code samples helps us focus on what the problem really is and skip unrelated guesswork. You could minimize the test case and merge code behind in the page.

Another thing. You posted on 4.x forums, but you mentioned you are using 2.5 DLL? So you meant to post this on 2.x forums? Shall we move your thread to 2.x forums? I see your example does not work on Ext.NET 4 at all.

fabricio.murta
Apr 07, 2017, 6:54 PM
Hello again! And the most probable answer to your problem is you are simply not handling number keys (as well as many other keys) when they are pressed (released, actually) on your TestExtractionProtocol.filterComboOnKeyUp() function.

Check how when you type characters the list is updated and when you type numbers it is not. Likewise, typing "-" (hyphen) does not update the combo display.

Hope this helps!

amitpareek
Apr 10, 2017, 4:07 PM
Hi Fabricio

Thanks for your quick response.

Yes you can move it to 2.x

here is the sample code :


<script type="text/javascript">


TestExtractionProtocol = {


ExpComboSelect: function (combo, records, eOpts) {


var cmVal = combo.getValue();
combo.getTrigger(0).show();


if (combo.id == "ExpClientListCombo1") {
App.storeEXPPackageList1.clearFilter();
App.ExpFQListCombo1.getStore().clearFilter();


App.storeEXPPackageList1.filter('ClientId', cmVal);
App.ExpFQListCombo1.getStore().filter('ClientId', cmVal);


App.ExpPackageListCombo1.reset();
App.ExpPackageListCombo1.focus();
App.ExpFQListCombo1.reset();
}
else if (combo.id == "ExpPackageListCombo1") {
App.ExpFQListCombo1.getStore().clearFilter();
App.ExpFQListCombo1.getStore().filter('PackageId', cmVal);


App.ExpFQListCombo1.reset();
App.ExpFQListCombo1.focus();
}
else if (combo.id == "ExpFQListCombo1") {
}
},


clearFilterExp: function (me) {
me.clearValue();
me.getTrigger(0).hide();


if (me.id == 'ExpClientListCombo1') {


App.storeEXPPackageList1.clearFilter();
App.ExpPackageListCombo1.getTrigger(0).hide();
App.ExpPackageListCombo1.clear();


App.ExpFQListCombo1.getStore().clearFilter();
App.ExpFQListCombo1.getTrigger(0).hide();
App.ExpFQListCombo1.clear();
}
else if (me.id == 'ExpPackageListCombo1') {


App.ExpFQListCombo1.getStore().clearFilter();
App.ExpFQListCombo1.getTrigger(0).hide();
App.ExpFQListCombo1.clear();


App.storeEXPPackageList1.clearFilter();
App.ExpPackageListCombo1.clear();
}
else if (me.id == "ExpFQListCombo1") {

App.ExpFQListCombo1.clear();


window.setTimeout(function () {
if (App.ExpPackageListCombo1.getValue() != null && App.ExpPackageListCombo1.getValue().toString().tri m() != "")
App.ExpFQListCombo1.getStore().filter("PackageId", App.ExpPackageListCombo1.getValue().toString());
else if (App.ExpClientListCombo1.getValue() != null && App.ExpClientListCombo1.getValue().toString().trim () != "")
App.ExpFQListCombo1.getStore().filter("ClientId", App.ExpClientListCombo1.getValue().toString());
}, 50);
}


},


filterComboOnKeyUp: function (combo, event, fn) {


if ((event.keyCode >= 96 && event.keyCode <= 105) || (event.keyCode >= 65 && event.keyCode <= 90) || event.keyCode == 8 || event.keyCode == 46) {
try {
combo.getTrigger(0).show();
}
catch (exc) {
console.log(exc);
}
if (event.keyCode == 8 || event.keyCode == 46) {


if (combo.getRawValue() == null || combo.getRawValue().trim() == "")
combo.getStore().clearFilter();


if (combo.id == "ExpPackageListCombo1") {
App.storeEXPPackageList1.clearFilter();
App.storeEXPPackageList1.filter("ClientId", App.ExpClientListCombo1.getValue().toString());
}
}


if (combo.id == "ExpPackageListCombo1") {


App.storeEXPPackageList1.clearFilter();


window.setTimeout(function () {


if (combo.getRawValue() != null && combo.getRawValue().trim() != "")
App.storeEXPPackageList1.filter("PackageName", new RegExp(combo.getRawValue(), "i"));


}, 10);
}


else if (combo.id == "ExpFQListCombo1") {


window.setTimeout(function () {


if (App.ExpPackageListCombo1.getValue() != null && App.ExpPackageListCombo1.getValue().toString().tri m() != "")
combo.getStore().filter("PackageId", App.ExpPackageListCombo1.getValue().toString());
else
combo.getStore().filter("ClientId", App.ExpClientListCombo1.getValue().toString());


window.setTimeout(function () {


if (combo.getRawValue() != null && combo.getRawValue().trim() != "")
combo.getStore().filter('FQName', new RegExp(combo.getRawValue(), "i"), true, false);


}, 100);
}, 100);
}
}
},


ExpComboBoxReady: function () {


clientList = []; a = 1;
packageList = []; b = 1;
fqList = []; c = 1;


for (var i = 1; i <= 10 ; i++) {


clientList.push({ ClientId: i, ClientName: "Client " + i });


for (var j = 1; j <= 10 ; j++) {


packageList.push({ ClientId: i, PackageId: b, PackageName: "Package " + b });


for (var k = 1; k <= 50 ; k++) {


fqList.push({ ClientId: i, PackageId: b, FQId: c, FQName: "FQ " + c });
c++;
}
b++;
}
}

App.storeEXPClientList1.removeAll();
App.storeEXPClientList1.add(clientList);


App.storeEXPPackageList1.removeAll();
App.storeEXPPackageList1.add(packageList);


App.storeEXPFQList1.removeAll();
App.storeEXPFQList1.add(fqList);


App.ExpClientListCombo1.anyMatch = true;
App.ExpClientListCombo1.enableRegEx = false;
App.ExpClientListCombo1.bindStore(App.storeEXPClie ntList1);
App.ExpClientListCombo1.displayField = 'ClientName';
App.ExpClientListCombo1.valueField = 'ClientId';
//App.ExpClientListCombo1.getStore().sort();


App.ExpPackageListCombo1.anyMatch = true;
App.ExpPackageListCombo1.enableRegEx = false;
App.ExpPackageListCombo1.bindStore(App.storeEXPPac kageList1);
App.ExpPackageListCombo1.displayField = 'PackageName';
App.ExpPackageListCombo1.valueField = 'PackageId';
//App.storeEXPPackageList1.sort();


App.ExpFQListCombo1.anyMatch = true;
App.ExpFQListCombo1.enableRegEx = false;
App.ExpFQListCombo1.bindStore(App.storeEXPFQList1) ;
App.ExpFQListCombo1.displayField = 'FQName';
App.ExpFQListCombo1.valueField = 'FQId';
//App.ExpFQListCombo1.getStore().sort();
},


}
</script>

<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="supportResourceManager" runat="server" DirectMethodNamespace="DM">
</ext:ResourceManager>


<ext:Panel runat="server" ID="pnlParent" ItemID="pnlParent" Height="500px" Border="true" Layout="FitLayout">
<Items>
<ext:Container runat="server" Layout="HBoxLayout" ID="cntClient">
<Items>
<ext:ComboBox ID="ExpClientListCombo1" EnableRegEx="true" ItemID="ExpClientListCombo1" QueryMode="Local" runat="server" DisplayField="ClientName"
Width="280" LabelWidth="83" ValueField="ClientId" FieldLabel="Client Name" MatchFieldWidth="true" TypeAhead="true" MarginSpec="15 0 0 15">
<Store>
<ext:Store runat="server" ID="storeEXPClientList1" ItemID="storeEXPClientList1" Namespace="App" AutoLoad="true" AutoDataBind="true" AutoDestroy="false">
<Model>
<ext:Model runat="server" ID="modelclientlstEP" IDProperty="ClientId">
<Fields>
<ext:ModelField Name="ClientId"></ext:ModelField>
<ext:ModelField Name="ClientName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect"></Select>
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);"></TriggerClick>
<AfterRender Fn="TestExtractionProtocol.ExpComboBoxReady" Delay="1000"></AfterRender>
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true"></ext:FieldTrigger>
</Triggers>
</ext:ComboBox>


<ext:ComboBox ID="ExpPackageListCombo1" ItemID="ExpPackageListCombo1" runat="server" QueryMode="Local" DisplayField="PackageName"
Width="290" LabelWidth="95" ValueField="PackageId" FieldLabel="Package Name" MatchFieldWidth="true" TypeAhead="true" MarginSpec="15 0 0 15"
EnableKeyEvents="true" AutoScroll="true">
<Store>
<ext:Store runat="server" ID="storeEXPPackageList1" ItemID="storeEXPPackageList1" Namespace="App" AutoLoad="true" AutoDataBind="true" AutoDestroy="false" SortOnFilter="true">
<Model>
<ext:Model runat="server" ID="modelpackagelstEP" IDProperty="PackageId">
<Fields>
<ext:ModelField Name="ClientId"></ext:ModelField>
<ext:ModelField Name="PackageId"></ext:ModelField>
<ext:ModelField Name="PackageName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect"></Select>
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);"></TriggerClick>
<KeyUp Fn="TestExtractionProtocol.filterComboOnKeyUp"></KeyUp>
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true"></ext:FieldTrigger>
</Triggers>
</ext:ComboBox>
<ext:ComboBox ID="ExpFQListCombo1" ItemID="ExpFQListCombo1" runat="server" QueryMode="Local" Width="250" LabelWidth="25"
DisplayField="FQName" ValueField="FQId" FieldLabel="FQ" MatchFieldWidth="true"
MarginSpec="15 0 0 15" TypeAhead="true" >
<Store>
<ext:Store runat="server" ID="storeEXPFQList1" ItemID="storeEXPFQList1" Namespace="App" AutoLoad="true" AutoDataBind="true" AutoDestroy="false" SortOnFilter="true">
<Model>
<ext:Model runat="server" ID="modelfqlistEP" IDProperty="FQId">
<Fields>
<ext:ModelField Name="ClientId"></ext:ModelField>
<ext:ModelField Name="PackageId"></ext:ModelField>
<ext:ModelField Name="FQId"></ext:ModelField>
<ext:ModelField Name="FQName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect"></Select>
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);"></TriggerClick>
<KeyUp Fn="TestExtractionProtocol.filterComboOnKeyUp"></KeyUp>
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true"></ext:FieldTrigger>
</Triggers>
</ext:ComboBox>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</div>
</form>
</body>






Also note that i am not using "TestExtractionProtocol.filterComboOnKeyUp".
Its just for reference that, i have used this function because the filter didn't work on type.

This code is written in aspx page and it does have aspx.cs (server side) page, but its empty. I have not used any server side method.

I just want that on typing in combo it should filter automatically, so that i dont need to add any extra code to filter combo.

Let me know if you need any more information.

Thanks.

fabricio.murta
Apr 10, 2017, 5:18 PM
Hello @amitpareek! Thanks for providing the test case!

If you disable the custom function on KeyUp event, the filters work right. But I get you require the custom behavior to the filter when it is applied.

But it can't be helped, if your custom function does not handle the keys, you could even return true from it, that it wouldn't work right as, when the non-handled keys are triggered, it would do the original job only -- which you are overriding for a reason.

Look at line 88 of your code. That test. It should handle numeric keys. Possibly also symbol keys like %, -, =. Actually it should handle any keypress, or at least keys bound to "printable characters" that the original TypeAhead functions does.

Well, unless I'm missing a point here. It really looks like the problem is just that test not handling -- at least in your test scenario -- the numeric key presses.

Hope this helps! I hope being able to point the line number I'm talking about makes it clearer now. :)

EDIT: oh yes, for the testing only, I commented out both KeyUp handlers you set up (lines 277 and 303) and the filtering as I type numbers works just fine.

amitpareek
Apr 11, 2017, 10:32 AM
Can you please follow these steps to reproduce the issue which i got :

1) Type anything in second combo and Clear it with trigger click (do this couple of times)
2) Select any value in first combo and do the step 1.
3) Now clear first combo and then type in combo 2.
if you can do these steps couple of times you can see the issue in filter.

Let me know if it still works for you.

fabricio.murta
Apr 11, 2017, 5:59 PM
Hello @amitpareek!

I just moved the thread to the 2.x forums. Tried to reproduce the issue... but maybe because of the other issue I'm not seeing your point.

What I keep getting here is that it does not filter, for example, the "package 5" if I type "5" in the second combo.

So then I changed the loop that filled the values you in the test data (lines 160-180) like this:



for (var i = 1; i <= 10 ; i++) {
clientList.push({ ClientId: i, ClientName: "Client " + String.fromCharCode(65 + i) + i });
for (var j = 1; j <= 10 ; j++) {
packageList.push({ ClientId: i, PackageId: b, PackageName: "Package " + String.fromCharCode(65 + b) + b });
for (var k = 1; k <= 50 ; k++) {
fqList.push({ ClientId: i, PackageId: b, FQId: c, FQName: "FQ " + String.fromCharCode(65 + c) + c });
c++;
}
b++;
}
}


Then repeat the tests all I can see if whether I type any char (except space or p,a,c,k,g,e that are on every entry), I consistently get the desired record. If I type numbers, the filter does not update at all.

For example, with the code above:
1. type and clear (using the trigger) field 2 (package name) several times
2. select something on field 1 (client name)
3. back to field 2, type and clear again (using the trigger) several times
4. type "i" on the field 2.
It will show "Package I8" and "Package i40". Which is expected.
5. continue then and type "8" (making it "i8")
It won't take away the "Package i40" entry from the list -- as opposed to what I would expect
6. keep on and type "0" (making it "i80")
The two entries will remain in the list -- again not expected as the filter matches no entry at all
7. hit backspace
Only the "Package i8" is shown now.

Some caveats:
- in step 6, if you type "a" instead of "0", you'll get the list shortened to no entry at once (as expected)
- in step 7, provided you followed original step 6, typing a character will also clear the list

So, again, what I see is that the number keys are not being handled by the function filterComboOnKeyUp() defined on line 85 of your code. Characters and backspace keys in turn, are.

If that's still not the issue, please provide a simplified sample, without any unrelated code (specially code making other issues -- which distracts us even more from the main point) as suggested in our first response in this thread. Else, we will be but unable to provide you any useful feedback on your issue.

Your sample code is also throwing javascript errors when I hit backspace if the combo has just one character left.

amitpareek
Apr 12, 2017, 4:16 PM
I am not using the custom filter anymore, so i have removed that code.

This is the sorted sample code :



<script type="text/javascript">


TestExtractionProtocol = {


ExpComboSelect: function (combo, records, eOpts) {


var cmVal = combo.getValue();
combo.getTrigger(0).show();


if (combo.id == "ExpClientListCombo1") {
App.storeEXPPackageList1.clearFilter();
App.ExpFQListCombo1.getStore().clearFilter();


App.storeEXPPackageList1.filter('ClientId', cmVal);
App.ExpFQListCombo1.getStore().filter('ClientId', cmVal);


App.ExpPackageListCombo1.reset();
App.ExpPackageListCombo1.focus();
App.ExpFQListCombo1.reset();
}
else if (combo.id == "ExpPackageListCombo1") {
App.ExpFQListCombo1.getStore().clearFilter();
App.ExpFQListCombo1.getStore().filter('PackageId', cmVal);


App.ExpFQListCombo1.reset();
App.ExpFQListCombo1.focus();
}
else if (combo.id == "ExpFQListCombo1") {
}
},


clearFilterExp: function (me) {
me.clearValue();
me.getTrigger(0).hide();


if (me.id == 'ExpClientListCombo1') {


App.storeEXPPackageList1.clearFilter();
App.ExpPackageListCombo1.getTrigger(0).hide();
App.ExpPackageListCombo1.clear();


App.ExpFQListCombo1.getStore().clearFilter();
App.ExpFQListCombo1.getTrigger(0).hide();
App.ExpFQListCombo1.clear();
}
else if (me.id == 'ExpPackageListCombo1') {


App.ExpFQListCombo1.getStore().clearFilter();
App.ExpFQListCombo1.getTrigger(0).hide();
App.ExpFQListCombo1.clear();


App.storeEXPPackageList1.clearFilter();
App.ExpPackageListCombo1.clear();
}
else if (me.id == "ExpFQListCombo1") {

App.ExpFQListCombo1.clear();


window.setTimeout(function () {
if (App.ExpPackageListCombo1.getValue() != null && App.ExpPackageListCombo1.getValue().toString().tri m() != "")
App.ExpFQListCombo1.getStore().filter("PackageId", App.ExpPackageListCombo1.getValue().toString());
else if (App.ExpClientListCombo1.getValue() != null && App.ExpClientListCombo1.getValue().toString().trim () != "")
App.ExpFQListCombo1.getStore().filter("ClientId", App.ExpClientListCombo1.getValue().toString());
}, 50);
}


},


ExpComboBoxReady: function () {


clientList = []; a = 1;
packageList = []; b = 1;
fqList = []; c = 1;


for (var i = 1; i <= 10 ; i++) {


clientList.push({ ClientId: i, ClientName: "Client " + i });


for (var j = 1; j <= 10 ; j++) {


packageList.push({ ClientId: i, PackageId: b, PackageName: "Package " + b });


for (var k = 1; k <= 50 ; k++) {


fqList.push({ ClientId: i, PackageId: b, FQId: c, FQName: "FQ " + c });
c++;
}
b++;
}
}

App.storeEXPClientList1.removeAll();
App.storeEXPClientList1.add(clientList);


App.storeEXPPackageList1.removeAll();
App.storeEXPPackageList1.add(packageList);


App.storeEXPFQList1.removeAll();
App.storeEXPFQList1.add(fqList);


App.ExpClientListCombo1.anyMatch = true;
App.ExpClientListCombo1.enableRegEx = false;
App.ExpClientListCombo1.bindStore(App.storeEXPClie ntList1);
App.ExpClientListCombo1.displayField = 'ClientName';
App.ExpClientListCombo1.valueField = 'ClientId';


App.ExpPackageListCombo1.anyMatch = true;
App.ExpPackageListCombo1.enableRegEx = false;
App.ExpPackageListCombo1.bindStore(App.storeEXPPac kageList1);
App.ExpPackageListCombo1.displayField = 'PackageName';
App.ExpPackageListCombo1.valueField = 'PackageId';


App.ExpFQListCombo1.anyMatch = true;
App.ExpFQListCombo1.enableRegEx = false;
App.ExpFQListCombo1.bindStore(App.storeEXPFQList1) ;
App.ExpFQListCombo1.displayField = 'FQName';
App.ExpFQListCombo1.valueField = 'FQId';
},


}
</script>

<ext:Panel runat="server" ID="pnlParent" ItemID="pnlParent" Height="500px" Border="true" Layout="FitLayout">
<Items>
<ext:Container runat="server" Layout="HBoxLayout" ID="cntClient">
<Items>
<ext:ComboBox ID="ExpClientListCombo1" EnableRegEx="true" ItemID="ExpClientListCombo1" QueryMode="Local" runat="server" DisplayField="ClientName"
Width="280" LabelWidth="83" ValueField="ClientId" FieldLabel="Client Name" MatchFieldWidth="true" TypeAhead="true" MarginSpec="15 0 0 15">
<Store>
<ext:Store runat="server" ID="storeEXPClientList1" ItemID="storeEXPClientList1" Namespace="App" AutoLoad="true" AutoDataBind="true" AutoDestroy="false">
<Model>
<ext:Model runat="server" ID="modelclientlstEP" IDProperty="ClientId">
<Fields>
<ext:ModelField Name="ClientId"></ext:ModelField>
<ext:ModelField Name="ClientName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect"></Select>
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);"></TriggerClick>
<AfterRender Fn="TestExtractionProtocol.ExpComboBoxReady" Delay="1000"></AfterRender>
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true"></ext:FieldTrigger>
</Triggers>
</ext:ComboBox>


<ext:ComboBox ID="ExpPackageListCombo1" ItemID="ExpPackageListCombo1" runat="server" QueryMode="Local" DisplayField="PackageName" Width="290" LabelWidth="95"
ValueField="PackageId" FieldLabel="Package Name" MatchFieldWidth="true" TypeAhead="true" MarginSpec="15 0 0 15" AutoScroll="true">
<Store>
<ext:Store runat="server" ID="storeEXPPackageList1" ItemID="storeEXPPackageList1" Namespace="App" AutoLoad="true" AutoDataBind="true" AutoDestroy="false" SortOnFilter="true">
<Model>
<ext:Model runat="server" ID="modelpackagelstEP" IDProperty="PackageId">
<Fields>
<ext:ModelField Name="ClientId"></ext:ModelField>
<ext:ModelField Name="PackageId"></ext:ModelField>
<ext:ModelField Name="PackageName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect"></Select>
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);"></TriggerClick>
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true"></ext:FieldTrigger>
</Triggers>
</ext:ComboBox>
<ext:ComboBox ID="ExpFQListCombo1" ItemID="ExpFQListCombo1" runat="server" QueryMode="Local" Width="250" LabelWidth="25"
DisplayField="FQName" ValueField="FQId" FieldLabel="FQ" MatchFieldWidth="true" MarginSpec="15 0 0 15" TypeAhead="true" >
<Store>
<ext:Store runat="server" ID="storeEXPFQList1" ItemID="storeEXPFQList1" Namespace="App" AutoLoad="true" AutoDataBind="true" AutoDestroy="false" SortOnFilter="true">
<Model>
<ext:Model runat="server" ID="modelfqlistEP" IDProperty="FQId">
<Fields>
<ext:ModelField Name="ClientId"></ext:ModelField>
<ext:ModelField Name="PackageId"></ext:ModelField>
<ext:ModelField Name="FQId"></ext:ModelField>
<ext:ModelField Name="FQName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect"></Select>
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);"></TriggerClick>
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true"></ext:FieldTrigger>
</Triggers>
</ext:ComboBox>
</Items>
</ext:Container>
</Items>
</ext:Panel>



I have attached the gif file here, in which you can see the issue:

1) First I select any value in all three combo
2) Clear all three combo with trigger
3) When i type package 3, it selects that, but does not filter
3) When i type package 21, it does not filter (it should show only records that contains "package 2" e.g. package 2, package 20, package 21 and so on)
4) Same thing with 3rd combo, when i try to type "FQ 20" it should filter but it did not.

Please do let me know if you are getting my point or not.

I am trying to attach the gif file, but not sure whats going on here, its uploaded but i can not see it here.
So i added it in my googleDrive, you can access it here :
https://drive.google.com/file/d/0B_m4SK6-v2DsblhxeXFlcUhEbXM/view?usp=sharing

fabricio.murta
Apr 12, 2017, 7:34 PM
Hello @amitpareek!

Your test case is throwing errors on load. Please provide it in a way we can copy paste and run our side, without missing bits. It is important to keeping it simplified to a minimum, without unrelated code. Or else we just can't find nor reproduce your issue if we have to add code by our own in order for it to run.

amitpareek
Apr 13, 2017, 8:27 AM
Hi Fabricio,

Can you post the error message please.
That code is working fine for me, so i need to reproduce on my end.

fabricio.murta
Apr 13, 2017, 4:28 PM
Hello @amitpareek!

There's no resourceManager defined in the page, at least. So the page refuses to load.

amitpareek
Apr 14, 2017, 7:52 AM
Hi Fabricio,

Can you please add below code, just above the panel pnlParent and try again ?



<ext:ResourceManager ID="supportResourceManager" runat="server" DirectMethodNamespace="DM"></ext:ResourceManager>

fabricio.murta
Apr 17, 2017, 6:22 PM
Hello @amitpareek!

I could run the example adding the resource manager.

It is still not clear what your goal is but I could see the calls you make for clearFilter() are breaking the typeAhead functionality of filtering the combo boxes based on what you type. I couldn't notice anything broken if I just commented out lines calling said clearFilter().

You should try the different approach suggested here: combox store filter lose efficacy after ClearFilter (https://forums.ext.net/showthread.php?59869)

Hope this helps!

amitpareek
Apr 18, 2017, 8:20 AM
Hi Fabricio,

That is what the main issue is, after clearFilter() its causing an issue in filter.

I will try this approch : https://forums.ext.net/showthread.php?59869
and let you know.

amitpareek
Apr 19, 2017, 12:15 PM
Hi Fabricio,

This solution didn't work for me.

I have to filter package combo on the basis of what is selected in client combo.
So when i try to select another value in client combo, i have to filter package combo, which requires to clear the filter.
Same thing with package and fq combo, fq combo filters on selection of package combo.

Hence this solution is not working for me : https://forums.ext.net/showthread.php?59869-combox-store-filter-lose-efficacy-after-ClearFilter&p=274164&viewfull=1#post274164

Note : here first combo is client, second is package and third is fq.

fabricio.murta
Apr 19, 2017, 3:14 PM
Hello @amitpareek!

As there's a conflict with the filters maybe if you populated the stores with the relevant data as the previous ones are selected would fit best to your scenario?

Refer to this example that shows linked combo boxes being populated on previous' selection: Forms - Combo Box - Linked Combo Boxes (http://examples2.ext.net/#/Form/ComboBox/Linked_ComboBoxes/)

Else maybe a solution would be to, instead of calling clearFilter(), removing just the specific filter you are applying to the store on selection, hopefully that would prevent the typeAhead filters from being removed.

amitpareek
Apr 19, 2017, 5:03 PM
Hi Fabricio,

That exampla is getting data in second combo via service (Cities.asmx/GetCities). While i have all the data available in the combo store (that we get on boxReady), just need to filter it as per the clientId/PackageId of the selected client/package combo.

Also i have tried to remove the filter on combo selection, that is even not working for me.

Can you please try these solution on your end and let me know if any of it works for you ?

fabricio.murta
Apr 20, 2017, 2:01 AM
Hello @amitpareek!

Well, a suggestion is exactly to cease loading all data to the combo box and filter + typeAhead filter it so that you don't need to clear the filter ever.

It is not required to use a service to load the data, if you look at the ajax linked combos example (http://examples2.ext.net/#/Form/ComboBox/Ajax_Linked_Combos/), it just wires the OnReadData event to load the combo box. There, the function that loads the city list could be just replaced by the example's for loop making (for example) the packages list for customer 3, if that was the selection passed to the event.

One advantage on this approach is loading to the page only the necessary data on demand, making the user experience better if there are a lot of companies and each has lots of packages and, in turn, each has a lot of "FQ" entries. And you can mask the other combo boxes with the word "loading" as it fetches the data from the server.

If you really require the "all comboboxes preloaded" approach, let us know. We can try to get something working for you if that's feasible.

There may be a simple solution or the fix so complicated it pretty much takes the underlying (ExtJS) framework towards the next version which, in turn, would make the solution not feasible.

Please consider the on-demand loading approach, and let us know if it does not help at all so we can investigate the "all preloaded" approach for work around over the problem.

amitpareek
Apr 20, 2017, 12:53 PM
Hello Fabricio,

There are more than 46000 records in our case, so we have to get it only once for all three combos, and hence we use all preloaded approach.
I want to make a try with on demand loading approach as you suggested, so will check it first and then let you know if it wont work for me.

Thank you.

fabricio.murta
Apr 20, 2017, 5:14 PM
Hello @amitpareek!

By your claim I believe the best option is really have it loading on-demand instead of filtering over. Will save a lot during the first page load.

Anyway, I went ahead and reviewed your test case with a working filter-based solution. At least as far as I tested it here, it works fine. The main point there is the clearFieldFilters() function used instead of the store's clearFilter().



<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>61851 - Store-filter-linked combo boxes</title>
<script type="text/javascript">
TestExtractionProtocol = {
ExpComboSelect: function (combo, records, eOpts) {
var clientcb = App.clientcb,
clientsto = App.clientsto,
pkgcb = App.pkgcb,
pkgsto = App.pkgsto,
fqcb = App.fqcb,
fqsto = App.fqsto,
clearFilter = TestExtractionProtocol.clearFieldFilters;

var cmVal = combo.getValue();
combo.getTrigger(0).show();
if (combo.id == clientcb.id) {
clearFilter(pkgsto, 'ClientId');
pkgsto.filter('ClientId', cmVal);
pkgcb.emptyText = "Select one Package";
pkgcb.applyEmptyText();
pkgcb.reset();
pkgcb.focus();

clearFilter(fqsto, 'ClientId');
fqsto.filter('ClientId', cmVal);
fqcb.reset();
} else if (combo.id == pkgcb.id) {
clearFilter(fqsto, 'PackageId');
fqsto.filter('PackageId', cmVal);
fqcb.emptyText = "Select one FQ";
fqcb.applyEmptyText();
fqcb.reset();
fqcb.focus();
}
},
// This will clear any filter affecting the specified field.
// It does not refresh the store though, it is expected a
// store.filter() would be called right after this to refresh it.
clearFieldFilters: function (store, field) {
var to_remove = [];

var eachFn = function (entry, index, self) {
if (entry.property == field) {
to_remove.push(index);
}
};

// Get the (reverse) list of filters to remove
Ext.each(store.filters.items, eachFn, this, true);

// Remove each filter
Ext.each(to_remove, function (entry) { store.filters.removeAt(entry); });
},
clearFilterExp: function (me) {
var clientcb = App.clientcb,
clientsto = App.clientsto,
pkgcb = App.pkgcb,
pkgsto = App.pkgsto,
fqcb = App.fqcb,
fqsto = App.fqsto,
clearFilter = TestExtractionProtocol.clearFieldFilters;

me.clearValue();
me.clear();
me.getTrigger(0).hide();
if (me.id == clientcb.id) {
clearFilter(pkgsto, 'ClientId');
pkgsto.filter('ClientId', -1);
clearFilter(fqsto, 'ClientId');
fqsto.filter('ClientId', -1);

TestExtractionProtocol.clearFilterExp(pkgcb);
pkgcb.emptyText = "Choose a client";
pkgcb.applyEmptyText();
} else if (me.id == pkgcb.id) {
clearFilter(fqsto, 'PackageId');
fqsto.filter('PackageId', -1);
TestExtractionProtocol.clearFilterExp(fqcb);
fqcb.emptyText = "Choose a package";
fqcb.applyEmptyText();
} else if (me.id == "fqcb") {
}
},

ExpComboBoxReady: function () {
var clientcb = App.clientcb,
clientsto = App.clientsto,
pkgcb = App.pkgcb,
pkgsto = App.pkgsto,
fqcb = App.fqcb,
fqsto = App.fqsto;

clientList = []; a = 1;
packageList = []; b = 1;
fqList = []; c = 1;

for (var i = 1; i <= 10; i++) {
clientList.push({ ClientId: i, ClientName: "Client " + i });

for (var j = 1; j <= 10; j++) {
packageList.push({ ClientId: i, PackageId: b, PackageName: "cl" + i + "/Package " + b });

for (var k = 1; k <= 50; k++) {
fqList.push({ ClientId: i, PackageId: b, FQId: c, FQName: "cl" + i + "/pk" + b + "/FQ " + c });
c++;
}
b++;
}
}

clientsto.removeAll();
clientsto.add(clientList);

pkgsto.removeAll();
pkgsto.add(packageList);
pkgsto.filter('ClientId', -1);

App.fqsto.removeAll();
App.fqsto.add(fqList);
fqsto.filter('ClientId', -1);
fqsto.filter('PackageId', -1);

clientcb.anyMatch = true;
clientcb.enableRegEx = false;
clientcb.bindStore(App.clientsto);
clientcb.displayField = 'ClientName';
clientcb.valueField = 'ClientId';

pkgcb.anyMatch = true;
pkgcb.enableRegEx = false;
pkgcb.bindStore(App.pkgsto);
pkgcb.displayField = 'PackageName';
pkgcb.valueField = 'PackageId';
pkgcb.emptyText = "Choose a client";
pkgcb.applyEmptyText();

fqcb.anyMatch = true;
fqcb.enableRegEx = false;
fqcb.bindStore(App.fqsto);
fqcb.displayField = 'FQName';
fqcb.valueField = 'FQId';
fqcb.emptyText = "Choose a package";
fqcb.applyEmptyText();
},
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<div>
<h2>
Forum thread <a href="https://forums.ext.net/showthread.php?61851">61851</a>: link combo boxes by
their respective stores' filters with typeAhead enabled.
</h2>
<br />
<h4>
Using store.clearFilter() while typeAhead is enabled effectively disables typeAhead, so a selective
removal of filters is necessary, which is implemented with
<pre>TestExtractionProtocol.clearFieldFilters(store, field)</pre>
</h4>

<ext:Panel runat="server" ID="pnlParent" ItemID="pnlParent" Height="500">
<Items>
<ext:ComboBox
ID="clientcb"
QueryMode="Local"
runat="server"
DisplayField="ClientName"
Width="300"
Margin="15"
ValueField="ClientId"
FieldLabel="Client Name"
LabelAlign="Right"
TypeAhead="true"
>
<Store>
<ext:Store runat="server" ID="clientsto">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ClientId" />
<ext:ModelField Name="ClientName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect" />
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);" />
<AfterRender Fn="TestExtractionProtocol.ExpComboBoxReady" Delay="1000" />
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
</Triggers>
</ext:ComboBox>

<ext:ComboBox
ID="pkgcb"
runat="server"
QueryMode="Local"
DisplayField="PackageName"
Width="300"
Margin="15"
ValueField="PackageId"
FieldLabel="Package Name"
LabelAlign="Right"
TypeAhead="true"
>
<Store>
<ext:Store runat="server" ID="pkgsto" SortOnFilter="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ClientId"></ext:ModelField>
<ext:ModelField Name="PackageId"></ext:ModelField>
<ext:ModelField Name="PackageName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect"></Select>
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);"></TriggerClick>
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true"></ext:FieldTrigger>
</Triggers>
</ext:ComboBox>
<ext:ComboBox
ID="fqcb"
runat="server"
QueryMode="Local"
Width="300"
Margin="15"
DisplayField="FQName"
ValueField="FQId"
FieldLabel="FQ"
LabelAlign="Right"
TypeAhead="true"
>
<Store>
<ext:Store runat="server" ID="fqsto" SortOnFilter="true">
<Model>
<ext:Model runat="server" ID="modelfqlistEP">
<Fields>
<ext:ModelField Name="ClientId" />
<ext:ModelField Name="PackageId" />
<ext:ModelField Name="FQId" />
<ext:ModelField Name="FQName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect" />
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);" />
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
</Triggers>
</ext:ComboBox>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>


Still, the best solution seems to be loading the combo boxes as the selections are made.

Hope this helps, nevertheless!

amitpareek
Apr 25, 2017, 5:48 PM
Hi Fabricio,

Your sample code works for me.
I have applied the code and it works as per my requirement, but i don't understood it properly.
So can you please explain how clearFieldFilters is working here.

fabricio.murta
Apr 26, 2017, 5:16 AM
As stated here (https://forums.ext.net/showthread.php?61851&p=281681&viewfull=1#post281681):



(...) a solution would be to, instead of calling clearFilter(), removing just the specific filter you are applying to the store on selection, hopefully that would prevent the typeAhead filters from being removed.


This is what it does. The code has been shared, I can't see a way to better explain it. Does the bits above clarify the matter?

amitpareek
Apr 28, 2017, 10:12 AM
Hi Fabricio,

Yes it prevents typeAhead , but its not always working for me.
Because for getting all the data in fqCombo, i have to apply clearFilter on it, untill and unless i am not able to get all data in its store.
The issue i was facing is, sometimes even after applying clearFieldFIlters on it, i wont be able to get all the data in its store, but it works fine when i call triggerClick of client combo, so i was not sure whats going on there.
This is why i was asking how it actually works.

fabricio.murta
Apr 28, 2017, 5:50 PM
Hello @amitpareek!

Sorry, you call clearFilter() typeAhead will be no more. Unless you change/override the clearFilter() function to check if the typeAhead filter is there and not remove it, can't predict how reliable that would be.

Try to use the clearFieldFilters(store, field) method to clear filters over specific fields then I believe you'd be good. If I recall well, the typeAhead filter do not match any field in the store, if you look at the filter structure.

But I'm not sure you are telling what happened or if you are describing a scenario you need the solution provided does not help you with?

amitpareek
May 12, 2017, 4:51 PM
You can close this.