Comments (30)
Thx @kodepareek.
FYI, you don't need to rewrite the table part in your CustomDatagrid, you just can do that :
<Datagrid headerOptions={{ adjustForCheckbox: true }} bodyOptions={{ displayRowCheckbox: true }} rowOptions={{ selectable: true }} options={{ multiSelectable: true, onRowSelection: {this.handleRowClick} }}>
It should be cleaner to maintain.
from react-admin.
I created a PR for this: https://github.com/marmelab/admin-on-rest/pull/1241
from react-admin.
I'd advise to wait until material ui 1.0 is released. At that point we'll switch back from real tables to MUI tables.
from react-admin.
I write the selection into state as state.selection which is then picked up by the Assign Button action component.
I have made the outer List component into a connected component. You can also make the customData grid below connected.
class CustomDatagrid extends Component {
handleRowClick = (rowArr) => {
const {ids, handleSelection} = this.props
if (Array.isArray(rowArr)) {
handleSelection(rowArr.map(row => ids[row]))
} else {
handleSelection(ids)
}
}
render() {
const { resource, children, ids, isLoading, data, currentSort, basePath, styles = defaultStyles, muiTheme, rowStyle, options, headerOptions, bodyOptions, rowOptions } = this.props;
render() {
const { resource, children, ids, isLoading, data, currentSort, basePath, styles = defaultStyles, muiTheme, rowStyle, options, headerOptions, bodyOptions, rowOptions } = this.props;
return (
<Table style={options && options.fixedHeader ? null : styles.table}
fixedHeader={false}
selectable={true}
multiSelectable={true}
onRowSelection={this.handleRowClick}
{...options}
>
.......................................................................
onRowSelection just returns the row number that was clicked need to map that into the ids of the record which is tales in my case.
Inside the outer List component of CustomDatagrid, in my case EditorAssignView
class EditorAssignView extends Component {
handleSelection = (selection) => {
const { AddSelectionToState } = this.props
AddSelectionToState(selection)
}
render() {
const props = this.props
return (
<List {...props} actions={<TaleAssignListActions />} title="Fresh Tales" >
<CustomDatagrid handleSelection={this.handleSelection}>
.............................................................
The add selection to state action
export const ADD_SELECTION_TO_STATE = 'ADD_SELECTION_TO_STATE';
export const AddSelectionToState = (selection, basePath) => {
return {
type: ADD_SELECTION_TO_STATE,
payload: {selection: selection},
}
};
from react-admin.
Implemented in #1521
from react-admin.
@kodepareek sorry to bother, but when I click on my button, the selection is resetted immediatly because the checkboxes are unchecked if you click outside, do you have the problem ?
Edit: Ok it was because of the material UI option, you have to set deselectOnClickaway to false.
from react-admin.
I think I can do it. I will get back here a plan about how I am going to execute this feature. Have done something similar. Will think about generalizing.
from react-admin.
from react-admin.
+1
from react-admin.
@fzaninotto Some ideas about the implementation of this feature ? Gonna try to implement it on a project.
from react-admin.
@fzaninotto
It seems that you switch backed to real tables with the responsive ui PR.
But you didn't reenabled the checkbox.
How do you imagine this feature. You check the boxes, and when you click a bulk action, you send all ids to the action ? Or Should we try to implement the rest call to get last status for all items selected and send objects to the action ?
What is the best way to get all checked boxes ?
from react-admin.
I haven't thought about it yet. Give it a try!
from react-admin.
@fzaninotto @wadjeroudi - hi guys, how far have you got ?
I've been speaking to a friend and he was struggling to work out the best way to implement this.
Presumably, we'd have modify our UserList component for instance to take an actions={}
I'm thinking then that bulk actions live at bottom of list (in datagrid) to distinguish between Add Filter/Create (non-bulk) actions at the top ?
Actions would then be a dropdown initially - a bit like filters work?
Once selected, pass in selectedRecords from the datagrid as a parameter.
I'm anticipating 2-3 types of actions:
a) action where it would immediately do a REST API post request
b) action that throws up a dialog box
c) presumably a 3rd type where action could modify page (e.g. as filters do)
from react-admin.
@mantis didn't do it.
I think that for now, we should just aim one type of action a function that receives selected records. and it's up to the user to do whatever he wants ?
from react-admin.
I haven't given it time, but you can look at how ng-admin handles it - it's probably a good inspiration.
from react-admin.
Have just implemented this using Material UI components following are the steps I took.
- Create custom Datagrid using material UI (pretty straightforward) and basically copypasting AOR code and enabling checkboxes
- adding Custom Action to the List component. In my case this was an 'Assign All' button. That maps to the following action. This is documented in the below link.
https://marmelab.com/admin-on-rest/List.html#actions
export const AssignAllToSelf = (selection, basePath) => {
return {
type: ASSIGN_ALL_TO_SELF,
payload: {selection: selection},
meta: { resource: 'tales/assignEditor', fetch: UPDATE, cancelPrevious: false }
}
};
- adding a custom wrapper on the rest client that intercepts UPDATE calls to 'tales/assignEditor'
(AOR does not have bulk update feature just yet. )
if (type === 'UPDATE' && resource === 'tales/assignEditor') {
let url = config.host + '/' + 'tales/assignEditor'
options.method = 'PUT';
options.body = JSON.stringify(params)
return handleRequestAndResponse(url, options)
} else {
return requestHandler(type, resource, params);
}
Working just fine! :)
from react-admin.
@kodepareek how do you get the selection ? After you turn on the displayRowCheckbox, how do you link the custom(s) action(s) with the selected checkboxes ?
Update: it seems that we need to use the onRowSelection event to get the selected rows.
from react-admin.
Oh That must be new. In my aor version selectable = false has been hard coded in.
from react-admin.
It is hardcoded but you can override them.
from react-admin.
Oh that's super. Will try it out tomorrow. Will definitely make things cleaner.
from react-admin.
What is the status of this feature? The project I'm currently working on requires bulk deletion, so I have to implement it in the nearest future. I'd like to know where to start: should I start from scratch or there is some existing project/codebase available that I could join or reuse?
from react-admin.
Lists accept actions as props now.
https://marmelab.com/admin-on-rest/List.html#actions
@djhi I think we can close this issue.
from react-admin.
No, actions (the list of buttons on the top of the screen) and list actions (actions you can execute on a selection of rows) are different.
This feature is not started. If you want to give it a try, you're welcome!
from react-admin.
what news about feature?
from react-admin.
Sorry guys. My app has been in some kind of production hell here at work.
I should start work on this by this weekend.
from react-admin.
@kodepareek Could you, please, say what are you going to do? There is already a pull request with this feature: https://github.com/marmelab/admin-on-rest/pull/1013, or am I wrong? I'm waiting there for some feedback from... anyone.
from react-admin.
from react-admin.
@kodepareek Did you use @alexeyoganezov changes or did you try a custom solution?
from react-admin.
@kodepareek Oh I think it's in this thread correct?
from react-admin.
from react-admin.
Related Issues (20)
- Add Repobeats (metrics) to README
- TabbedForm has Error: Maximum update depth exceeded. HOT 7
- `<Autocomplete onCreate>` briefly displays wrong option name
- ra-data-graphql: faulty deprecation warning regarding `override` HOT 2
- Current page of list view should not be silently preserved HOT 1
- Cli does not show anything HOT 3
- Webstorm does not able to read .eslintrc.js HOT 1
- TabbedForm has Error: Maximum update depth exceeded HOT 4
- NumberInput fails to parse not a number input value and which causes input label overlaying non existing value HOT 1
- [CRM Demo] When using modals for show and edit views, the data is not updated in show views
- Documentation search is broken on versions < latest (v5.05) HOT 1
- Nested ArrayInput saves all values to undefined HOT 1
- Running dist code on production not working as expected HOT 3
- notification sent from user account to administrator account react js HOT 4
- rowClick is called automatically HOT 3
- [useTranslatable::getRecordPath] - record with "null" value causes a client error | Edit with <TranslatableInputs> HOT 1
- Running on Next.js 14 with App Router doesn't seem to allow for path based URLs HOT 1
- ArrayInput + SimpleFormIterator no working correctly inside the TranslatableInputs component in React Admin 5.1 HOT 3
- Incorrect index display in PrevNextButtons component on pagination navigation HOT 1
- datagrid rowclick / show row as link to allow right click to open context menu - open in a new tab 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 react-admin.