Comments (6)
I'm working on this. It's posing somewhat of a challenge to replicate though as our actual implementation is very server oriented. Given that I can't just hook a code sandbox up to our server's filtering and other functionality very easily it's not working quite the same. I'll post the link as soon as I get this to a reasonable state. Might take me another day or so.
from mui-x.
Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!
from mui-x.
https://codesandbox.io/s/data-grid-community-forked-kt97wv?file=/src/App.tsx
Perhaps this will be enough to diagnose? I can't get it to fully replicate our current functionality. Some of our code can't be implemented in a demo sandbox as easily because we use a server side filtering setup with some Redux thunks that act upon the filter model as it changes. Because of this it seems that the sandbox doesn't want to apply the Recent / Shipped filters like our actual codebase will. As mentioned the real codebase does at least apply the filters correctly, but leaves the form with a single initial date range filter row. However, the sandbox does clearly show in the console that it gets to the onFilterChange function, but fails to filter or change the form in this case. If this isn't enough let me know and I can keep trying to tweak.
In case it helps, the primary difference between our code and the sandbox is just a simple hook to retrigger the Redux thunk and update the state data that the table uses whenever the filter model changes.
That looks like this
export function useFetchOrders(filterModel, paginationModel, sortModel) {
const dispatch = useAppDispatch();
const status = useAppSelector(getOrderStatus);
const data = useAppSelector(orderHeaderSelectors.selectAll);
const [count, setCount] = React.useState(0);
useEffect(() => {
const fetch = async (filterModel) => {
let results = await dispatch(
fetchOrders(filterModel, paginationModel, sortModel),
);
setCount(results.data?.count);
return results;
};
fetch(filterModel);
}, [dispatch, filterModel, paginationModel, sortModel]);
const isLoading = status === 'loading' || status === undefined;
return { data, isLoading, count };
}
and the data and isLoading values are then passed to the DataGrid as the rows and loading props respectively.
If necessary, I could also provide a login for our beta site as a live or even access to our code repo. My boss said it shouldn't be that big of a deal, but it might require some kind of NDA signed for the safety of our code and data at that point. I wasn't really sure how feasible that is. I know some organizations that provide commercial support will do this, but I'm not sure if that's how you guys tend to operate.
from mui-x.
For what this is worth, I did manage to find a workaround for my use case. The documentation specifically recommends avoiding it except as a last resort, but it seems that if I add an apiRef to the QuickButtonPanel component and directly call apiRef.current.setFilterModel({data}) with the filter values I want everything updates correctly. If this is what you would advise that's fine. I feel like this working means I've messed up somewhere in my onFilterChange or something to cause it to not update properly. Wouldn't surprise me as I'm still learning new things about your API daily. If that is the case though I'd prefer to properly fix it rather than opting for the last resort option.
Just so you can see what I mean here is the change I made in my local version
QuickButtonPanel.tsx
const recentHandler = () => {
apiRef.current.setFilterModel({
items: [
{
id: 2,
field: 'request_date',
operator: 'between',
value: {
start: moment(new Date())
.subtract(2, 'months')
.format('YYYY-MM-DD'),
end: moment(new Date()).format('YYYY-MM-DD'),
},
},
{
id: 3,
field: 'open_order',
operator: 'equals',
value: false,
},
{ id: 4, field: 'ready_to_fulfill', operator: 'equals', value: true },
],
});
};
from mui-x.
I'm glad you already figured out the way to fix the issue, I couldn't get your codesandbox example to work, though I suspect the issue might be related to not having the correct dependencies in the React.useCallback
function onFilterChange
due to which it always has the initial or outdated value of the variables it's using and the expected behavior is not achieved.
Could you try adding the dependencies and see if it fixes the problem or make the codesandbox example work? I'll be happy to have another look over it.
Thanks
from mui-x.
The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.
from mui-x.
Related Issues (20)
- [TreeView] Expose the item slots at the tree view level
- [data grid] Is Clipboard cut available? HOT 1
- [data grid] Save / Restore state with dynamic columns HOT 7
- [pickers] dayjs with default timezone broke picker HOT 2
- [pickers] Page fails to load Date Picker Component with Joy UI using CssVarsProvider Wrapper HOT 5
- [charts] Improve default color contrast in dark mode HOT 9
- [RFC] Move to a more modular structure for tests in code and CI HOT 4
- Add Audio Player/Waveform component HOT 2
- [charts] Cannot scroll the page when touch inside the chart HOT 7
- [data grid] Pivoting ETA HOT 4
- Pie Chart shows a slice for 0 value whenever the object representing a 0 is last in the array HOT 2
- [DataGrid] CSV export negative numbers in string has quotation HOT 3
- [data grid] Is there a way to override the default copy/paste functionality in DataGrid? HOT 7
- New sets of components HOT 6
- [charts] BarChart legend overlaps charts area HOT 3
- [pickers] Recipes HOT 1
- [data grid] I want to add Apply and Cancel buttons to the GridToolbarFilterButton HOT 5
- [pickers][DateTimeRangePicker] Manually selecting the date then selecting the time in the popover reverts the date to today HOT 2
- [charts] Support single color area chart HOT 9
- [data grid] Row pinning with Server-side tree data HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.