Posted 8 January 2025, 4:16 pm EST
I have an existing solution involving the Flex Grid in React that allows me to define an initial filter and apply it to the in my component.
Recently, I have migrated my app away from create-react-app to vite and updated a bunch of react libraries to newer versions. After doing so, all the FlexGrids across my site no longer correctly implement my initial filters.
Basically, after the FlexGridFilter initializes, I run this code:
filter.filterDefinition = JSON.stringify({
defaultFilterType: FilterType.Condition,
filters: ipmFilterSettings.columns.map(c => ({
binding: c.field,
type: "condition",
condition1: {
operator: c.operator,
value: c.value,
},
and: true,
condition2: {
operator: null,
value: "",
},
})),
});It takes my filter settings and maps my data (field, operator, value) into the expected filter definition format. All of this code has not changed at all in my newly migrated app, but it no longer works.
Additionally, my grid’s source is an OData v4 API and I use a custom RestCollectionViewOData class that extends RestCollectionView (from an example I found previously). This custom class builds the OData filter using an internal function named _asODataFilter to read the grid’s filter, check for active filters, and convert them to OData operators for the url to include. It seems like this entire thing no longer works–it does not find any filters to include in the url and so it makes a bare request to the API. This started happening after migrating my app to Vite. I have no idea why.
I’ve attached a zip file that includes my React component code as well as the custom RestCollectionView class. FlexGridInitialFilterExample.zip
I’ve also tried to bind the grid directly to an array and it correctly handles my initial filters for arrays. It seems like the RestCollectionViewOData class, for some reason, can no longer access the grid’s filter and, when doing some shotgun debugging, it looks like all the filter data is null or inactive when the collection view code tries to read from it.
This issue happens when running the app hosted locally using vite as well as when hosting the compiled version in IIS.
I can also confirm that the user is able to click the filter button in the column header to open the filter popup and add filters themselves. When they do that, the filter works perfectly fine. The only issue is trying to assign a filterDefinition when first showing the page to the user.
Here are some of the packages that I updated in case the versions matter (though I don’t know why it would?):
- “react”: “^18.1.0” ==> “^18.3.1”
- “react-dom”: “^18.1.0” ==> “^18.3.1”
- “@types/react”: “^18.0.8” ==> “^18.3.1”
- “@types/react-dom”: “^18.0.3” ==> “^18.3.1”
- Added “vite”: “^6.0.3”,
- Added “vite-plugin-svgr”: “^4.3.0”,
- Added “vite-tsconfig-paths”: “^5.1.4”,
- Removed “react-scripts”: “^5.0.1”,
These are the versions of the various Wijmo packages I am referencing. These are unchanged from my previous version before my migration:
- “@mescius/wijmo”: “^5.20241.9”,
- “@mescius/wijmo.grid”: “^5.20241.9”,
- “@mescius/wijmo.grid.filter”: “^5.20241.9”,
- “@mescius/wijmo.grid.xlsx”: “^5.20241.9”,
- “@mescius/wijmo.odata”: “^5.20241.9”,
- “@mescius/wijmo.react.grid”: “^5.20241.9”,
- “@mescius/wijmo.react.grid.filter”: “^5.20241.9”,
- “@mescius/wijmo.react.input”: “^5.20241.9”,
- “@mescius/wijmo.rest”: “^5.20241.9”,
- “@mescius/wijmo.styles”: “^5.20241.9”,
I’m really hoping someone can help me with this issue. If there’s anything else I can provide to help, I will do my best to do so.
