Comments (9)
Hey thanks for your response! We do use processRowUpdate
in our data grid, but are unable to use it how we want.
I made a live code example here. Ive made it so the request take a while to save so its easier to test.
So what I want to happen is when a user makes a change to Name
and they press Enter
(or click out of the cell) to save. I want the entire row to be completely disabled for editing.
In my live code example if you choose a row:
- Change Name
- Press
Enter
- You can still edit Country (and save by pressing enter) within the same row
Now we have 2 Post calls waiting. Which we don't want. Hopefully this example is better, thanks!
from mui-x.
@MBilalShafi This is an interesting use case ... could you assist here?
from mui-x.
This is one of the solutions I tried (I used redux in our application to keep track of the current id being edited to test the concept). But if you follow the steps above or try re-editing the same cell by spamming enter it breaks (sometimes). Heres a screenshot of the error with this solution I tried
It crashes the page. Thats why I think it would be nice to be able to disable the row (and grey the row out as an indicator) right after they press enter/click out the row to save their changes.
from mui-x.
Would this be more in line with a feature request?
I'd say yes. There doesn't seem to be an easy way to achieve your use case out of the box.
To me, this makes sense along with the data source implementation around the edit feature, but it could also be done separately since it corresponds to the server-side synchronization part of the row editing.
Until we pick this up, I'll add a Waiting for upvotes 👍
label to see demand for it in the community. Feel free to add an upvote on the issue description.
from mui-x.
@MBilalShafi Thanks!
from mui-x.
This is something that can be done with the processRowUpdate
method.
Here are the docs for that: The processRowUpdate
method
I am not sure though what your exact needs are. Could you elaborate a bit on what you want to achieve?
from mui-x.
Ideally we would like to see a live code example to work with. 👍🏼
from mui-x.
@aestradaes Have you already tried using the loading prop to prevent users from updating rows during the API call?
One drawback could be that it will block the rest of the rows during the update too.
from mui-x.
@MBilalShafi I have tried that, but it blocks the rest of the rows like you said. For me in line row editing is basically some sort of a form. And like other forms, when you submit I would like to grey the inputs until the post is finished. Unfortunately it seems there isn't an easy way to do what I am asking. Would this be more in line with a feature request?
from mui-x.
Related Issues (20)
- [charts] Axis not plot if the domain contains only one value HOT 3
- [data grid] `onColumnVisibilityModelChange` event returns empty object on show all columns from columns option in toolbar HOT 2
- [data grid] When select filter or manage column from the column menu the popover should open under their respective button HOT 2
- [data grid] how to use `DateRangePicker` as `DataGrid` header filter properly HOT 5
- [pickers] DesktopDateTimePicker not responsive on mobile devices HOT 5
- [data grid] `onRowSelectionModelChange` firing twice HOT 2
- [DataGrid] Demo containers HOT 1
- [data grid] Add row while filter is active HOT 1
- [DataGrid] Reordered row stays highlighted
- [data grid] Updating Columns and Column Grouping Simultaneously and Repeatedly throws Runtime Errors HOT 1
- [charts] Add a line band plotting HOT 4
- [charts] MaxValue to take full width in Horizontal Bar Charts. HOT 2
- [pickers] Change the time placeholder to be `--:-- --` instead of `hh:mm aa` HOT 3
- [data grid] Vertical sticky for column headers in a Data Grid with horizontal scroll HOT 3
- [data grid] Using `initialState` with `sort`, will trigger a `onFetchRows` function call on first load HOT 3
- [fields] Provide DatePicker option to show the label at the top and the placeholder in the field, while empty and unfocused HOT 1
- Babel Configuration Issue: Optional Chaining Syntax Not Supported in MUI X Charts HOT 1
- [data grid] Numbers separator (comma or dot) based on localeText prop HOT 1
- [x-license] setting license key in micro frontend HOT 7
- [data grid] Any opened group by rows is automatically closed before printing HOT 1
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.