[ANGULAR] How to use column filtering with cell values which are objects

[annaj]

I have tried a few different configurations from looking in the documentation, but no joy. I think I am missing something obvious here.

I can see some examples on forums using filterFunction, and filterFn.

Goal

To be able to have the cell values in { id, name } format, as when they are updated back to the API that is what will be saved and fetched, whilst also being able to use column filters, with OR behaviour.

I've taken an example which shows filtering by city, e.g. filter rows which have a city of 'Paris' or 'Stockholm'.

https://codepen.io/adammarshall84/pen/ZYYNyzW?editors=0010

See the numbered comments there to see where I have intervened.

// 1. Massage data so the value is { id, name }.

// 2. use a template so 'name' is displayed instead of `[object object]`

// 3. now what is the correct filter configuration?

So 3. is the question - what configuration do I need? What things set there are unnecessary?

When I debug locally, for

isIncludedIn(v) {
   return this.filterValue.length === 0 || this.filterValue.includes(v);
}

this.filterValue is an array of numbers (id) - good.
v is always an object - bad - I'd like to be id.

[marcio]

Hey annaj,

Thanks for reaching out.

To achieve filtering on cell values that are objects, you can use a custom filterFn in your column configuration. This function allows you to define how the filtering should be applied to each record. Since your cell values are in the { id, name } format, you can access the id property within the filterFn to perform the filtering.

Here's an example configuration for your column:

const grid = new Grid({
    columns: [
        {
            field: 'city',
            text: 'City',
            filterable: {
                filterFn: ({ record, value }) => {
                    // Access the id property for filtering
                    return this.filterValue.length === 0 || this.filterValue.includes(record.city.id);
                },
                filterField: {
// your configuration
                }
            }
        }
    ],
    // other grid configurations
});

In this configuration, filterFn checks if the id of the city matches any of the selected filter values. Ensure that your filterValue is correctly set to the array of ids you want to filter by.

You can see that working here https://codepen.io/marciogurka/pen/vEEweGx.

[annaj]

great, thank you, I can see that coming through.

trying to give more information but getting an error saying I need to use [code] tags... I think you have to have at least one [code] tag in weirdly.

I think when I tried filterFn, I had it beneath filterField not alongside it.

is filterFn documented anywhere?

{ value } seems to be the same as this.filterValue - is that ok to use?

we'd also need the property, so we can grab from either record[property].id or record.data[property].id, rather than just .city so its reusable for multiple columns - is that available on this?

also we are using TypeScript and Angular, the compiler isn't happy with the code 'as is' - do you know the types for this (in this scope) record and value.

[ghulam.ghous]

is filterFn documented anywhere?

No not specifically but it is used inside the snippets here: https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-filterable.

{ value } seems to be the same as this.filterValue - is that ok to use?

I would not recommend using the filterValue as it seems something internal and not public. Please use value which is documented and public: https://bryntum.com/products/grid/docs/api/Grid/feature/Filter#config-value

we'd also need the property, so we can grab from either:

record[property].id
 or 
record.data[property].id

rather than just .city so its reusable for multiple columns - is that available on this?

Yes you can do that I believe. But I do not understand what you mean by about whether it is available on this? You can always put a debugger there and check.

also we are using TypeScript and Angular, the compiler isn't happy with the code 'as is' - do you know the types for this (in this scope) record and value.

Here this is of type collectionFilter. Value is an array of numbers. and the record is of type Model.

[annaj]

thanks for the information - the types work great!

this is what I am using currently:

filterFn: function ({ record, value }: { record: Model; value: number[] }) {
  const collectionFilter: CollectionFilter = this as unknown as CollectionFilter;
  const property: string = collectionFilter.property;
  const cellValue: unknown = record.getData(property);
  return checkDoesCellValueMatchSelectedFilterOptions(value, cellValue);
}

[ghulam.ghous]

So everything is working great? Please know this the type for values might change based on your logic. I just recommended you to use value: number[] based on the codepen.

[marcio]

Hey annaj,

Thanks for letting us know.

You can add field to the column, and then you'll have that info on the filterFn, I updated the demo, you can check the console.log https://codepen.io/marciogurka/pen/vEEweGx.

[annaj]

yes everything working - thanks