Tree Panel Advanced Filter

[dan182]

Hiya

In the example here https://examples1.ext.net/#/TreePanel/Advanced/Filter/

Pressing the enter key causes a post back but on the examples explorer it does not, how is this disabled.

Thanks in advance
Daniel

[santhu12smart]

Hi, As mentioned in above question, me too having the same problem.
As shown in the example, i have changed the line of code for ESC event like below.

if (e.getKey() === Ext.EventObject.ESC || e.getKey() == Ext.EventObject.ENTER) {
clearFilter();
}

But still causing error like 'this.root' is null or not an object and hope causing postback. Even i have added EnableEventValidation="true" in page directive also.
Instead of enter key, i tried with 13 also. still getting same problem.
I tried with adding the below line also in Listeners.
<Listeners>
<KeyUp Fn="filterTree" Buffer="250" />
<KeyPress Fn="filterTree" Buffer="250" />
<TriggerClick Handler="clearFilter();" />
</Listeners>
But still if i click on Enter key causing the same error.
Anyone can plz help me out from this prob asap plz.


Thanks in Advance,
Regards,
Santhosh

[santhu12smart]

Hi guys,
For my previous post, I have solved it by writing the code as below.

<ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true" Width="165px">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
<KeyPress Handler="swallowEnter();" />
<KeyUp Fn="filterTree" Buffer="250" />
<TriggerClick Handler="clearFilter();" />
</Listeners>
</ext:TriggerField>

<script type="text/Javascript>

//Disabling Enter key in TreePanel Filter
function swallowEnter() {
if (event.keyCode == 13) {
event.keyCode = 9; //Assigning tab functionality to Enter key
}
}
</script>

If u have any other idea to fix the above issue, plz share here. Let it be helpful for others.


Regards,
Santhosh

[dan182]

Hi guys,
For my previous post, I have solved it by writing the code as below.

<ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true" Width="165px">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
<KeyPress Handler="swallowEnter();" />
<KeyUp Fn="filterTree" Buffer="250" />
<TriggerClick Handler="clearFilter();" />
</Listeners>
</ext:TriggerField>

<script type="text/Javascript>

//Disabling Enter key in TreePanel Filter
function swallowEnter() {
if (event.keyCode == 13) {
event.keyCode = 9; //Assigning tab functionality to Enter key
}
}
</script>

If u have any other idea to fix the above issue, plz share here. Let it be helpful for others.


Regards,
Santhosh

Hi Santhosh

I implemented your code but the problem I found was if you entered a few characters and then pressed enter then the filter would no longer work because of the key assignment.

I modified your swallow enter function and this works perfectly for me now.

        function swallowEnter() {
            if (event.keyCode == 13) {                
                Ext.EventObject.stopEvent();
            }
        }

[santhu12smart]

Hi dan,
Yours is perfect solution. Mine was partial.
Thanks Alot..!!

Regards,
Santhosh