Paged Grid Filter Field

[JeffHowden]

I needed to have a simple text field to allow the user to enter some simple text strings to be used to filter the grid results server-side. So, here's my bit of code to accomplish this (assuming that your datastore is in a variable named ds and your grid's footerPanel is in a variable named gridFoot):

var paging = new Ext.PagingToolbar(gridFoot, ds, { pageSize: 20 }); // create a paging toolbar
paging.add('-', 'Filter: '); // add a separator followed by a text string to label the filter input
var filter = Ext.get(paging.addDom({ // add a DomHelper config to the toolbar and return a reference to it
tag: 'input'
, type: 'text'
, size: '30'
, value: ''
, cls: 'x-grid-filter'
}).el);
filter.on('keypress', function(e) { // setup an onkeypress event handler
if(e.getKey() == e.ENTER) // listen for the ENTER key
ds.load({ // call the load() method of your datastore
params: {
start: 0 // reset the start to 0 since you want the filtered results to start from the first page
, limit: 20
}
});
});
filter.on('keyup', function(e) { // setup an onkeyup event handler
var key = e.getKey(); // assign the current key to a local variable
if((key == e.BACKSPACE || key == e.DELETE) && this.getValue().length == 0) // listen for the BACKSPACE or DELETE keys and the field being empty
ds.load({ // call the load() method of your datastore
params: {
start: 0 // reset the start to 0 since you want unfiltered results to start from the first page
, limit: 20
}
});
});
filter.on('focus', function(){this.dom.select();}); // setup an onfocus event handler to cause the text in the field to be selected

Now, to make this fully work, we need to setup a beforeload event handler on the datastore so the filter value gets sent to the server:

ds.on('beforeload', function() {
ds.baseParams = { // modify the baseParams setting for this request
filter: filter.getValue() // retrieve the value of the filter input and assign it to a property named filter (rename to suit your needs)
};
});

[mysticav]

Works perfectly.

Thanks.

[cobnet]

Thanks, second working perfectly comment!
Mark

[KRavEN]

This works great for me in firefox but in IE6 hitting enter with an editor grid just chooses the first cell in the grid.

Any idea how I could resolve that? I was thinking on adding a submit button but hoped there was a workaround.

[KRavEN]

answer to my own question. change keypress to keydown for the ENTER listener

[JeffHowden]

answer to my own question. change keypress to keydown for the ENTER listener
For UI consistency (and other reasons), I'd recommend actually listen to the keyup handler.

[KRavEN]

I tried that first but it only worked if I hit enter twice or had a cell highlighted before hiting enter.

[sonic64]

Hello,

thanks for this very useful example. However, I don't understand this:
ds.baseParams = { // modify the baseParams setting for this requestHow is this function supposed to filter a table when no where I could find a POST request from the server???

Am I missing something?

Thanks

[JeffHowden]

thanks for this very useful example. However, I don't understand this:

ds.baseParams = { // modify the baseParams setting for this request

How is this function supposed to filter a table when no where I could find a POST request from the server???

Take a look at what is calling that bit of code. It's part of the anonymous function that's attached to the beforeload event which befores just before the load() method of the store is called.

[sonic64]

So you're saying that there is no need to make a call server side. the anonymous function attached to the handler beforeload just gets the value of the text inputted in the filter...
Does this mean that this code works for any case? If not, what part is to be changed?
Thanks in advance

[JeffHowden]

So you're saying that there is no need to make a call server side. the anonymous function attached to the handler beforeload just gets the value of the text inputted in the filter...
Does this mean that this code works for any case? If not, what part is to be changed?
Thanks in advance

No, that's not quite what I said. The beforeload event fires when the store is asked to go get new data for the grid (because of paging, remote sorting, custom action like my filter field, etc.), but fires before it actually goes and makes the request. This is handy because the store, by default, sends start, limit, and anything defined in baseParams. So, in our anonymous function attached to the beforeload event, we simply update the value of baseParams so the request to the server will contain the necessary information.

[sonic64]

I tried your code as is; just added start and limit to ds.baseParams because I am using a paged grid. But when I input text into my filter field, nothing happens.
Is there a special library I am forgetting? Also, what column of the grid is the filter based on?
Thanks

[JeffHowden]

I tried your code as is; just added start and limit to ds.baseParams because I am using a paged grid. But when I input text into my filter field, nothing happens.
Is there a special library I am forgetting? Also, what column of the grid is the filter based on?
Thanks

You don't need to add start and limit to baseParams. Those are already sent to the server by the load() method.

The filter box in this example isn't a client-side filter so nothing will happen by simply typing into it. Rather, it provides a means for sending some sort of filter text to the server where you can alter the query that's returning data to the grid. So, in that sense, the column the filter operates on isn't any specific column, can be multiple columns, etc.

[sonic64]

Thanks Jeff for your answer,

What then could I use for my purpose? Any suggestions?
Thanks

[JeffHowden]

Thanks Jeff for your answer,

What then could I use for my purpose? Any suggestions?
Thanks
And your purpose is to filter client-side?

[sonic64]

yes! client side

[JeffHowden]

In that case, you're option in the Store class is the filter(property, value) method. Now, since this operates on your store, that means that property is the property in your JSON data that you want to filter on. The value argument must be a regex. When you're done, you can call the clearFilter() method on your store. You'll have to experiment a bit with this as I'm not sure what's necessary, if anything, to get the grid to reflect your filtered store.

If this is for paged data, though, I think it's completely unnecessary unless you're paging 500-100 records at a time, which is fairly pointless to page.

[MACscr]

Would be really cool if someone could show us how to implement this filter on a grid like this: http://extjs.com/forum/showthread.php?t=2779&highlight=php+mysql

I can get it to post the filter, but for some reason the filter isnt applied. It will show the limited number of results (20), but they dont match the filter besides that.

[JeffHowden]

You've gotta write the SQL to apply the filter yourself.

[MACscr]

You are correct. Someon on irc was kind enough to help my troubleshoot the issue and come up with a solution. I now have a working script. Thanks!

[ryanthe]

cool point from jeff , the point is to hack baseparams add something there.

[sonic64]

@MacScr,

Would you mind sharing your solution. I have been trying to make Jeff's filter work, but in vain...

Thanks

[KRavEN]

I use Jeff's search box. It works great. I posted a php database class in this subforum that works with it.

[Matt]

Hi Jeff, great mod for filters on grids. One quick question. I have implemented the filtering and it works for the most part, the only thing is if I search for something that is not in the database, it does not update the grid to tell me there are no results, it just stays the same. (For example: if I enter in a bunch of garbled text, the results will remain the same and not tell me there are no matches, but it will filter successful results) Is this something I am doing wrong or is this just how the mod functions?

My implementation is here: http://auctionenterprise.com/int/

I would appreciate any help that could be given!
Thanks!
Matt

[DrZog]

Matt, had the same problem and Tim helped me out on this one:

http://extjs.com/forum/showthread.php?t=4864&highlight=jeff+grid+filter

Basically make sure that your script returns an emtpy array and not a null value.

[francescotorres]

Thank for exemple. Very god...

[Matt]

Thanks DrZog, that worked like a charm!

Matt

[potdarko]

thank you Jeff, this is was exactly what i was looking for, just had to change

if((e.getKey() == e.BACKSPACE || e.getKey() == e.DELETE) && this.getValue().length == 0)

as some users were emptying the field with DELETE.

[JeffHowden]

thank you Jeff, this is was exactly what i was looking for, just had to change

if((e.getKey() == e.BACKSPACE || e.getKey() == e.DELETE) && this.getValue().length == 0)

as some users were emptying the field with DELETE.
Thanks. I actually made this change in the app I'm building where this came from, but didn't come back here to update the example code. I've gone ahead and updated it here too.

[timb]

Thanks for the code Jeff! I've found it useful too.

[galdaka]

Sorry for my English.

In my opinion this solution: http://ido.nl.eu.org/pir/ is more complete.

1) Server side search.

2) Actual page quick search.

http://www.extjs.com/forum/showthread.php?t=3203

Could we to look for between all a way to standar to do it, detect problems, ...

Thanks in advance.

[JeffHowden]

Sorry for my English.

In my opinion this solution: http://ido.nl.eu.org/pir/ is more complete.

1) Server side search.

2) Actual page quick search.

http://www.extjs.com/forum/showthread.php?t=3203

Could we to look for between all a way to standar to do it, detect problems, ...

Thanks in advance.
I really doubt a server-side search and a client-side search would be useful when both are applied to a grid, unless the client-side search offered some sort of tie to filtering on a specific column (user selected) or multiple columns. I see the use of a client-side search on a non-paged grid with many records and a server-side search on a paged grid, certainly, but not combined.

[trbs]

I really doubt a server-side search and a client-side search would be useful when both are applied to a grid, unless the client-side search offered some sort of tie to filtering on a specific column (user selected) or multiple columns. I see the use of a client-side search on a non-paged grid with many records and a server-side search on a paged grid, certainly, but not combined.

Hi Jeff; i agree with you, maybe i should have split it into 2 examples.
Quicksearch make the most sense without paging and most types of applications will use one or the other.

Actually i initially wrote quicksearch for another application and just combined it with the PIR database and serverside filtering to make a bigger and more complete example :)
and i think :-? i'll add support for filtering on a specific column in the near future (thanks for that)

The example is sort of my personal playpen and i hope people will look and learn from it as just that.
Besides both ways of searching still work perfectly fine without the other or paging :)
So people should just grab what they need from the example.

p.s. great thread and example !

[vedovelli]

copy > paste > try > work!

Thanks for share!

[Wolfgang]

Jeff's code works fine.
However, using EXT 1.1 i thought of using the Ext.form.TextField class.
The problem: Ext.form.TextField does not support events like key "keydown" and "keypress".
However it does support the event "'specialkey".
The problem: 'specialkey' does not fire on BACKSPACE or DELETE.

Here the code:

// search field
pageBar.addSeparator();
pageBar.addText('Filter:');
sbetreff = new Ext.form.TextField({
id: 'sbetreff',
width: 100,
allowBlank: true
});
pageBar.addField(sbetreff);
sbetreff.on('specialkey', function(a, e) {
if(e.getKey() == e.ENTER) {
ds.load({params: {start: 0, limit: pageBar.pageSize}});
}
});


Here an eventtrace:

// Hitting ENTER in 'sbetreff'
["keydown", Object browserEvent=Event keydown button=12 type=keydown]
["specialkey", Object initialConfig=Object id=sbetreff width=100, Object browserEvent=Event keypress button=12 type=keypress]
["keypress", Object browserEvent=Event keypress button=12 type=keypress, input#sbetreff.x-form-text, Object]
// Hitting TAB in 'sbtreff'
["keydown", Object browserEvent=Event keydown button=8 type=keydown]
["specialkey", Object initialConfig=Object id=sbetreff width=100, Object browserEvent=Event keypress button=-1 type=keypress]
["keypress", Object browserEvent=Event keypress button=-1 type=keypress, input#sbetreff.x-form-text, Object]
// Hitting BACKSPACE in 'sbetreff'
["keydown", Object browserEvent=Event keydown button=7 type=keydown]
["keypress", Object browserEvent=Event keypress button=7 type=keypress, input#sbetreff.x-form-text, Object]
// Hitting DELETE in 'sbtreff'
["keydown", Object browserEvent=Event keydown button=45 type=keydown]
["keypress", Object browserEvent=Event keypress button=-1 type=keypress, input#sbetreff.x-form-text, Object]

As you can see, ENTER and TAB work, DEL and BACKSPACE do not.
I do not thing that this is related to the pageingBar in particular.
It seems that form.Textfield either does not expose those keys as events or it is a bug.

Regards

Wolfgang

[violinista]

Yes, it does not support naturally, but you can always write::

Ext.get(sbetreff.el).on('keyup', function(e){
var fieldValue=sbetreff.getValue();
//Other code...
}



;)

Regards,

[ejetorix]

is that plugin completely functional in 2.0 or are there a better way to do this?

[sosensible]

I would like to know how to name the paging toolbar. I want server side filtering and this is (or appears to be) exactly what I was looking for.

bbar : new Ext.PagingToolbar({
pageSize: ugConfig.pageSize,
store: dataStore
}),


That is added to the grid creation code. Should I do this differently to get it to work as per your example? (I would love to see the whole code for that example, it would help. Also having a similar issue with layouts... want to create a standard common layout and then have pages feed the content of the layout sections in... anyone who could point me to a thread on that it would be appreciated. :) )

[mjlecomte]

There's a few around to do this type of thing. Off top of my head there's another version at www.extjs.eu