View Full Version : StoreFilterField with PagingLoader

17 Aug 2010, 1:25 AM

I have a grid where I added a StoreFilterField and a PagingToolBar.
The filter is working perfectly but it's only filtering the models from the page where I am in that moment.

It doesn't show all the models from the rest of the pages where it matches.

Page 1: Potatoe, Tomatoe
Page 2: Plum

If I filter by "P" it shows Potatoe in the first page and Plum in the second, but it doesn't show only one page with Potatoe and Plum.

How can I fix it?.


17 Aug 2010, 3:12 AM
The storefilterfield uses local filtering. You will need to create a custom FilterField that invokes a loader and so uses remote filtering.

18 Aug 2010, 2:25 AM
The storefilterfield uses local filtering. You will need to create a custom FilterField that invokes a loader and so uses remote filtering.

Hello Sven.

Thank you for your answer. I followed your steps and without change too much code I got it.

I will explain my steps just in case someone else wants to know how to make it.

First (design a new component extending StoreFilterField).
You can make it cleaner without extend StoreFilterField and taking only the functions that you really need, but in my case I didn't have so much time.

public abstract class RemoteStoreFilterField<M extends ModelData> extends StoreFilterField<M> {

protected void onFilter () {

// call to the handler

// handler that will call the rpc
protected abstract void handleOnFilter(String textoFiltro);

Second (declare the new component overriding the handler) and a private variable where we can save the text to filter.

private String text = null;

final RemoteStoreFilterField<TGraficosModel> filterField = new RemoteStoreFilterField () {

protected void handleOnFilter (String filter) {
if (filter == null || filter.equals(""))
text = null;
text = filter.toLowerCase();
// Call to the RPC

Third (declare the RpcProxy and the Loader)
We have to pass the filter text to the service.

final RpcProxy<PagingLoadResult<TGraficsModel>> proxy = new RpcProxy<PagingLoadResult<TGraficsModel>>() {

protected void load(Object loadConfig, AsyncCallback<PagingLoadResult<TGraficsModel>> callback) {
service.loadGrafics((FilterPagingLoadConfig) loadConfig, text, callback);

final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy) {

protected Object newLoadConfig() {
BasePagingLoadConfig config = new BaseFilterPagingLoadConfig();
return config;

Forth (using the service from the example Remote Filter Grid).
In the original code they are using a GridFilter but in our case we have the text from the FilterField, so we have to change the code.

Original code:

List<FilterConfig> filters = config.getFilterConfigs();
for (FilterConfig f : filters) {
Object ov = f.getValue();
String c = f.getComparison();
for (Stock s : stocks) {
Object value = s.get(f.getField());
if (f.isFiltered(s, ov, c, value)) {

Change to:
if (text != null)
for (TGraficsModel model: graficsModel) {
String field = model.get("NAME_PROPERTY_TO_FILTER").toString().toLowerCase();
if (!field.startsWith(text.toString().toLowerCase())) {

And that's all ;)