ListGrid ClientSide Filtering

[ksusanth]

SmartgGWT - 3.0p Pro

We are using a ListGrid which uses a ServerDataSource. Currently the Grid fetches data from the server. And when we enter data in the Filter and hit enter it makes a server request and returns the filtered dataset.

We are trying to return all data and do client side filtering. For the we did the following
On the datasource

containeeDS.setAutoCacheAllData(true);

On the ServerDataSource

        DSResponse dsResponse = new DSResponse();
        dsResponse.setTotalRows(list.size());
        dsResponse.setStartRow(0);

        dsResponse.setEndRow(list.size());
        dsResponse.setData(list);
        return dsResponse;

So this is to indicate that all rows have been returned.
We also tried in the above code to setEndRow(-1) based on some post in the forum.

In this case we expected that when we enter a value in the filter and enter the filtering would be done client side and not send a requet back the server datasource. This does not happen and always send request back to the server datasource. Is there anyway we can make the filtering to be done on the data on the client.

[Isomorphic]

The only setting needed is the first one (enabling cacheAllData). If you think there's a problem with this setting, try providing more information, such as a runnble test case.

[ksusanth]

GWT Version - 2.3
SmartGWT - 3.0p Pro

I have attached the source for a test case.
I am also pasting below the request and response from the console

First Load of Grid
Request
{
"dataSource":"clientfilter",
"operationType":"fetch",
"componentId":"isc_ListGrid_0",
"data":{
},
"startRow":0,
"endRow":75,
"textMatchStyle":"exact",
"resultSet":[Error in echoLeaf: [object Error]],
"callback":{
"caller":[Error in echoLeaf: [object Error]],
"methodName":"fetchRemoteDataReply"
},
"willHandleError":true,
"showPrompt":true,
"prompt":"Finding Records that match your criteria...",
"oldValues":{
},
"clientContext":{
"requestIndex":1
},
"requestId":"clientfilter$6270"
}

Response
[
{
data:[
{
id:"1",
symbolicName:"Test"
},
{
id:"2",
symbolicName:"Not"
}
],
endRow:2,
invalidateCache:false,
isDSResponse:true,
operationType:"fetch",
queueStatus:0,
startRow:0,
status:0,
totalRows:2
}
]

When i type "T" in the filter and enter
Request

{
"dataSource":"clientfilter",
"operationType":"fetch",
"componentId":"isc_ListGrid_0",
"data":{
"symbolicName":"t"
},
"startRow":0,
"endRow":75,
"textMatchStyle":"substring",
"resultSet":[Error in echoLeaf: [object Error]],
"callback":{
"caller":[Error in echoLeaf: [object Error]],
"methodName":"fetchRemoteDataReply"
},
"willHandleError":true,
"showPrompt":true,
"prompt":"Finding Records that match your criteria...",
"oldValues":{
"symbolicName":"t"
},
"clientContext":{
"requestIndex":2
},
"requestId":"clientfilter$6271"
}

and returns the same set of rows again.

I am trying to prevent the server call for filtering since i am sending all the rows to the client when the grid is loaded.

[Isomorphic]

setEndRow(list.size()) is not correct because endRow should be the index of the last row returned (for 2 rows, this is 1).

However also note that:

1. autoCacheAllData and cacheAllData have different behaviors, and if the first two requests happen before the first response is received, this can result in two separate fetches for autoCacheAllData (but not for cacheAllData).

2. by default cacheAllData only keeps its cache for a limited time - see docs for how to control this

[Isomorphic]

One more note - if you want to enable client-side filtering *for just one specific grid*, dataFetchMode:"local" also does this.

[ksusanth]

Hi

I made the following changes to the code.

Changed

 dsResponse.setEndRow(list.size() );

 dsResponse.setEndRow(list.size() - 1);

so now endrow is 1. This still doesn't do the filtering on the clients side. I wait for the grid to be loaded the first time and then enter a value in the filter and hit enter and this sends the request back to the server. So the second request is only after the first response has been recieved.

Is there anything else i need to do to make the autoCacheAllData to work. I would prefer using the autoCacheAllData as this allows me to control the caching based on the backend configuration, rather than making it a static value where it will always cache if i us cachealldata.

Pasting the Request, Response Below

Request 1
{
"dataSource":"clientfilter",
"operationType":"fetch",
"componentId":"isc_ListGrid_0",
"data":{
},
"startRow":0,
"endRow":75,
"textMatchStyle":"exact",
"resultSet":[ResultSet ID:isc_ResultSet_0 (created by: isc_ListGrid_0)],
"callback":{
"caller":[ResultSet ID:isc_ResultSet_0 (created by: isc_ListGrid_0)],
"methodName":"fetchRemoteDataReply"
},
"willHandleError":true,
"showPrompt":true,
"prompt":"Finding Records that match your criteria...",
"oldValues":{
},
"clientContext":{
"requestIndex":1
},
"requestId":"clientfilter$6270"
}

Response 1
[
{
data:[
{
id:"1",
symbolicName:"Test"
},
{
id:"2",
symbolicName:"Not"
}
],
endRow:1,
invalidateCache:false,
isDSResponse:true,
operationType:"fetch",
queueStatus:0,
startRow:0,
status:0,
totalRows:2
}
]

Request 2
{
"dataSource":"clientfilter",
"operationType":"fetch",
"componentId":"isc_ListGrid_0",
"data":{
"symbolicName":"T"
},
"startRow":0,
"endRow":75,
"textMatchStyle":"substring",
"resultSet":[ResultSet ID:isc_ResultSet_0 (created by: isc_ListGrid_0)],
"callback":{
"caller":[ResultSet ID:isc_ResultSet_0 (created by: isc_ListGrid_0)],
"methodName":"fetchRemoteDataReply"
},
"willHandleError":true,
"showPrompt":true,
"prompt":"Finding Records that match your criteria...",
"oldValues":{
"symbolicName":"T"
},
"clientContext":{
"requestIndex":2
},
"requestId":"clientfilter$6271"
}

Response 2
[
{
data:[
{
id:"1",
symbolicName:"Test"
},
{
id:"2",
symbolicName:"Not"
}
],
endRow:1,
invalidateCache:false,
isDSResponse:true,
operationType:"fetch",
queueStatus:0,
startRow:0,
status:0,
totalRows:2
}
]

[Isomorphic]

Can you indicate your exact SmartGWT version, and if it predates Jan 10, please retest with the latest patched version (see smartclient.com/builds).

[ksusanth]

I have used the 3.0p Pro version downloaded from the nightly builds dated Feb 16th for the testing.

I have tried this with multiple versions the latest being the above mentioned version. Is this test working for you. If it is can i upload the jar i am using so you can verify if it is a version issue.

[Isomorphic]

If you want to be sure your update succeeded there are instructions in the FAQ.

Can you confirm - we know you prefer to use autoCacheAllData, but if you instead set cacheAllData:true, do you see the same issue?

[ksusanth]

I have tried using cacheAllData and this works fine as long as there is no criteria. ie It does a fetch first time from server and then does filtering on client side.

But in my case i need to pass a criteria to decide what data to be fetched based on what link is selected on the UI. When cacheAllData is true the datasource does not pass any criteria to the server so i cannot use this.

Regards
Ganesh

[Isomorphic]

All modes of cacheAllData do require that the DataSource can accept a query to the server with no criteria. Likewise autoCacheAllData will only start client-side filtering when it sees a request and response where there was no criteria. Does this explain what you were seeing?

[ksusanth]

In the cacheAllData the criteria is stripped our before it sent to the server automatically even if we specify criteria in fetchData.

In the case of autoCacheAllData the criteria is sent to the server if specified on the client.

If you look at the sample i have sent you and the Request and Response below autoCacheAllData does not work even if no criteria is passed.

Regards
Ganesh

[Isomorphic]

For autoCacheAllData to be enabled, the request has to not only not have criteria, but also be a fetch for all rows. Your grid defaults to fetching ranges, so it sets startRow and endRow in the DSRequest, so autoCacheAllData is not triggered.

You can either:
1. set dataFetchMode:"basic" on the grid to turn off paging

2. manually call DataSource.fetchData() with no criteria, startRow or endRow specified

[ksusanth]

Thanks I will try that and let you know.

I also wanted to check if it is possible to client filtering when i pass criteria, no need any paging though.

The use case - The grid is used to display search results. Now they may want to filter on the results returned.

Regards
Ganesh

[ksusanth]

AutoCacheData works when dataFetchMode:"basic" on the grid to turn off paging.
And no criteria passed.

If we are setting the dataFetchMode to basic then really we are sending back all the rows since there is no paging enabled and this means it is not dynamic based on whether i send back all rows. So what is the differenc between this and cachealldata.

As per the autocache descritpion in the documentation it mentioned that it will automatically switch to cache true if all rows return from server. If i am harcoding dataFetchMode:"basic" in client then i have to send all rows back.

Also can you please let me know if it is possible to do client side filtering with criteria passed. I don't really need paging but i need to pass a criteria as mentioned in my use case in the previous post ie: User is doing a search and the filtering in the search results.