Unable to get custom filters work in server driven datagrid

[laughterborn]

Hi,
I'm planning to have custom filters for columns in server driven datagrid. However,I've found too few references/examples to achieve the same.
I want to know, if at all the customer filters are supported with server driven datagrid and is there any pointer for the same.

Thanks in advance!

[hippee-lee]

Great question @laughterborn - we have some documentation and code examples here. If you want to see a working example you can refer to the internal dev app here and the custom filter demos here.

[laughterborn]

Thanks @hippee-lee, I'd seen these examples and it don't contain usage of custom filter in pagination.
Also,I'm interested in understanding the usage of (clrDgRefresh)in component. Please point me to any other detailed documentation which explains this(If any).

[hippee-lee]

clrDgRefresh is for a server driven datagrid.

In that case you would pass the filter back to your server so it could filter the paginated dataset. Most folks use the examples on that page to get started but the internal dev app demo here might also help.

If thats not enough, please post a stackblitz with a simple example of what you are trying so we can look at your code and offer advice.

[laughterborn]

@hippee-lee ,Please find the stackblitz example here https://stackblitz.com/edit/clarity-datagrid-server-driven?embed=1&file=src/app/app.module.ts

In this I want to have a custom filter for sorting the column "year" with (>,< and =) operators.
Another observation is, state is not listening to the filter changes when applied.

[kumar-tadepalli]

Any update on this?

[laughterborn]

Hi @hippee-lee , any update on the above question?

[hippee-lee]

Hi @laughterborn - it looks like there may be an issue with me copying/pasting the inventory mock server code. I'm sorry but I don't have time to dig into it today and it does still work in the dev app. IMO - its not worth investigating because inventory service was created as a quick and simple mock and not intended to be prescriptive in developing a server driven datagrid.

I would suggest taking the ideas here and applying them to a real server driven API. The backend and refresh code will depend on the apps backend API.

[laughterborn]

Hi @hippee-lee,
I understand that backend will handle the data processing and we have that in place, but in order to build the query params for calling the backend API from UI.If I've understand properly, datagrid should provide the applied filters and sorting state (ClrDatagridStateInterface) on change right? which is not happening using custom filter.

As per the clarity documentation, the server driven datagrid will be acheived by using (clrDgRefresh)="refresh($event)" on datagrid. In your example, I noticed it is not used.

We are confused and blocked with implementation.It would be great,If you could please confirm whether custom filters will be supported using server driven paginated datagrid or not?

[hippee-lee]

Custom filters have always been provided when they are one of the active filters in the ClrDatagridStateInterface. They were part of the first version of datagrid release in November 2016.
The state object has always worked like this:

• If any datagrid filters are are active, there is an array of the active filters in the state object.
• It is the responsibility of the application to handle active filters in a way that makes sense for the backend before the application makes the request.

Please look here where I updated the demo to use *ngFor and modified the refresh function to provide selected colors info to the Mock inventory API / backend.

Here is a capture of the working implementation.

I have mentioned this several times but its worth repeating. This implementation is specific to the dev application from several years ago. I've extracted and modified it rather than coming up with a new custom filter server driven datagrid demo. The Inventory service is a mock to approximate a fake backend and the code I wrote to utilize the custom color filter is specific to both the color filter and the Inventory service. For your application the custom filter + the refresh function code needs to conform the the API that is being hooked up to the datagrid.

[kumar-tadepalli]

@hippee-lee What is the use of accepts() method, in case of server driven pagination. I'm not seeing this method being called while applying to filters in case of server driven pagination.

I could not find any explanation on significance of all properties/methods in the below interface:
interface ClrDatagridFilterInterface<T, S=any> {
isActive(): boolean;
accepts(item: T): boolean;
changes: Observable;
readonly state?: S;
equals?(other: ClrDatagridFilterInterface<T, any>): boolean;
}

[hippee-lee]

It will tell the backend what to filter on. E.g in the state object emitted it will pass which model property and what the current value for filtering is so that the backend can do its work and return the correct data set.