Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[question] Why is "filterMode='server'" not allowed when treeData is enabled ? #6873

Closed
2 tasks done
danyalkhanwayve opened this issue Nov 16, 2022 · 5 comments
Closed
2 tasks done
Labels
component: data grid This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user support: commercial Support request from paid users support: question Community support but can be turned into an improvement

Comments

@danyalkhanwayve
Copy link

danyalkhanwayve commented Nov 16, 2022

Order ID 馃挸

54054

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

The problem in depth 馃攳

Hi MUI team,

I'm currently using the DataGridPro TreeData feature to display a large volume of data and it works perfectly. However I do receive the following warning when in development mode: Warning: Failed prop type: MUI: The filterMode="server" prop is not available when the treeData is enabled. However despite the aforementioned warning, the rows still appear to be filtered server-side and so still works in the way I would like it to.

This leads me to ask the following: what is the point of this warning? Will enabling both server-side filtering and tree-data cause some kind of rendering issue internally? If not, can we then just remove this warning from the codebase?

Your environment 馃寧

`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
@danyalkhanwayve danyalkhanwayve added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: commercial Support request from paid users labels Nov 16, 2022
@zannager zannager added support: question Community support but can be turned into an improvement component: data grid This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user labels Nov 16, 2022
@flaviendelangle
Copy link
Member

When you have filterMode="server", we basically disable the internal filtering and let you reload the rows.
But with the tree data, we need all the rows to be able to generate the tree.
In a future release, we will add ways to only load the parents and lazy load the children (see #3377).

We could enable server side filtering with tree data, but you would always have to return the whole tree and to re-implement all the logic of the visible groups / visible children.
It would be interesting to test how it behaves with auto generated groups for instance.

@danyalkhanwayve
Copy link
Author

danyalkhanwayve commented Nov 16, 2022

Thanks for coming back so quickly on this!

Just to provide a bit more context, my approach to filtering is the following:

  • Set filtermode="server".
  • Defined and set onFilterModelChange. The function effectively sends the filters to our backend API, which in turn returns the filtered data.

Now with treeData={true}, does that mean DataGrid applies its own internal filtering on top of server-side filtering (as is triggered via onFilterModelChange)? If that's the case, then surely the warning Warning: Failed prop type: MUI: The filterMode="server" prop is not available when the treeData is enabled. isn't really that useful here, as I can still technically filter server-side.

I feel like the choice of using either 'client' or 'server' filter-mode should be left to the developer themselves rather than it being set in stone internally within the component no?

@flaviendelangle
Copy link
Member

flaviendelangle commented Nov 16, 2022

I feel like the choice of using either 'client' or 'server' filter-mode should be left to the developer themselves rather than it being set in stone internally within the component no?

As long as it is possible yes, this warning is meant to be temporary, waiting for a clean implementation of the server-side filtering with tree data.
But if it does work, then we can remove the warning.

Right now the grid filters the rows on the client even when filterMode="server".
So if we were to drop the warning, we would also need to skip the filtering just like on flat rows.
And add a warning in the doc saying that when using tree data with filterMode="server", the server should always return the full list of children (which won't scale well in term of performances).
But we would need to do some tests to make sure that I did not forget a reason why I added the warning in the first place, I should have written a detailed comment on that 馃槵

I do think however that the clean, long term solution is to allow people to only return the top level rows (filtered in the client or on the server) and then to have a callback to fetch the children of a group (which would be called whenever the filtering changes if the filtering is on the server or only once if the filtering is on the client).
But that's a big topic that we need to cover correctly to avoid mistakes.

@danyalkhanwayve
Copy link
Author

Thanks for the detailed reply, looking forward to the new lazy loading features!

@zannager zannager removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 10, 2023
@layerok
Copy link
Contributor

layerok commented May 5, 2024

I also don't understand why this warning exists. I filter server-side and use tree data and everything works as expected. It is really annoying to see this warning any time I open the console

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user support: commercial Support request from paid users support: question Community support but can be turned into an improvement
Projects
None yet
Development

No branches or pull requests

4 participants