Data state change is not calli ng after applying filtering
8 Replies
Hi Namita,
While using custom binding or Observable binding, the grid expects an object as the result of the custom logic and the emitted value should be an object with properties result and count. Also we have prepare a simple sample for your convenience. Please refer the below sample and screenshot for more information.
Screenshot:
For every grid actions(such as filter, page etc.,) we have triggered the dataStateChange event and in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction etc.,) based on that you can perform the action in your service and return data as result and count object.
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observable-binding-using-async-pipe
Note: ‘dataStateChange’ event is not triggered at the Grid initial render. You need to call your remote service by manually with pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings , you need send the default value as 12 ) in dataBound event of Grid. and please return the result like as “{result: […], count: …}” format to Grid.
If you still faced the issue, please share the below details
- Share the complete Grid code.
- Please try to replicate the issue in the given sample.
- If possible, please share the simple issue replicable sample.
Regards,
Manivel
Hi, I want to update something:-
Now I am able to get data in service in result and count format. But Data is not visible in Grid while using "| async".
If I am not using "| async" then it is giving data but filter doesn't work.
Here are some screenshot:-
Data is not coming:-
Another combination is:-
Data is coming:-
But filter is not working:-
If possible then we can have call also.
Thanks and Regards
Namita
Hi Namita,
Thanks for your update.
We are glad to hear that you are able to call server side state event with filter.
We have prepared a simple sample based on your requirement. In which, we filter one value using checkboxes. On filtering, the dataStateChange event will be triggered with the filter queries (where), using these queries you can perform filtering in your service and return the filtered records in result and count format to the Grid. Refer to the below screenshot.
|
public getData(state: DataStateChangeEventArgs): Observable<DataStateChangeEventArgs> {
let sortQuery: String = '';
const skipquery = state.skip ? `$skip=${state.skip}` : null;
let pageQuery = '';
const takeQuery = state.take ? `$top=${state.take}` : null;
if (skipquery) {
pageQuery = `${skipquery}&`;
}
if (takeQuery) {
pageQuery = `${pageQuery}${takeQuery}`;
}
let filterQuery: String = '';
if ((state.sorted || []).length) {
sortQuery = `&$orderby=` + state.sorted.map((obj: Sorts) => {
return obj.direction === 'descending' ? `${obj.name} desc` : obj.name;
}).reverse().join(',');
}
if (state.where) {
filterQuery = `&$filter=` + state.where.map((obj) => {
return (<Predicate>obj).predicates.map((predicate) => {
return predicate.operator === 'equal' ? `${predicate.field} eq ${predicate.value}` :
`${predicate.operator}(tolower(${predicate.field}),'${predicate.value}')`;
}).reverse().join(' and ');
});
}
return this.http
.get(`${this.BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true`)
.pipe(map((response: any) => response.json()))
.pipe(map((response: any) => {
return state.dataSource === undefined ? (<DataResult>{
result: response['value'],
count: parseInt(response['@odata.count'], 10),
}) : response['value'];
}))
.pipe(map((data: any) => data));
}
} |
Please get back to us if you need further assistance with this.
Regards,
Manivel
SIGN IN To post a reply.
