Git Product home page Git Product logo

Comments (30)

wadjeroudi avatar wadjeroudi commented on March 29, 2024 3

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.

tkvw avatar tkvw commented on March 29, 2024 3

I created a PR for this: https://github.com/marmelab/admin-on-rest/pull/1241

from react-admin.

fzaninotto avatar fzaninotto commented on March 29, 2024 2

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.

kodepareek avatar kodepareek commented on March 29, 2024 2

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.

fzaninotto avatar fzaninotto commented on March 29, 2024 2

Implemented in #1521

from react-admin.

wadjeroudi avatar wadjeroudi commented on March 29, 2024 1

@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.

kodepareek avatar kodepareek commented on March 29, 2024 1

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.

kodepareek avatar kodepareek commented on March 29, 2024 1

from react-admin.

MattWilliamsDev avatar MattWilliamsDev commented on March 29, 2024

+1

from react-admin.

wadjeroudi avatar wadjeroudi commented on March 29, 2024

@fzaninotto Some ideas about the implementation of this feature ? Gonna try to implement it on a project.

from react-admin.

wadjeroudi avatar wadjeroudi commented on March 29, 2024

@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.

fzaninotto avatar fzaninotto commented on March 29, 2024

I haven't thought about it yet. Give it a try!

from react-admin.

mantis avatar mantis commented on March 29, 2024

@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.

wadjeroudi avatar wadjeroudi commented on March 29, 2024

@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.

fzaninotto avatar fzaninotto commented on March 29, 2024

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.

kodepareek avatar kodepareek commented on March 29, 2024

Have just implemented this using Material UI components following are the steps I took.

  1. Create custom Datagrid using material UI (pretty straightforward) and basically copypasting AOR code and enabling checkboxes
  2. 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 }
  }
};

  1. 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.

wadjeroudi avatar wadjeroudi commented on March 29, 2024

@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.

kodepareek avatar kodepareek commented on March 29, 2024

Oh That must be new. In my aor version selectable = false has been hard coded in.

from react-admin.

wadjeroudi avatar wadjeroudi commented on March 29, 2024

It is hardcoded but you can override them.

from react-admin.

kodepareek avatar kodepareek commented on March 29, 2024

Oh that's super. Will try it out tomorrow. Will definitely make things cleaner.

from react-admin.

alexeyoganezov avatar alexeyoganezov commented on March 29, 2024

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.

kodepareek avatar kodepareek commented on March 29, 2024

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.

fzaninotto avatar fzaninotto commented on March 29, 2024

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.

iamsimakov avatar iamsimakov commented on March 29, 2024

what news about feature?

from react-admin.

kodepareek avatar kodepareek commented on March 29, 2024

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.

alexeyoganezov avatar alexeyoganezov commented on March 29, 2024

@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.

kodepareek avatar kodepareek commented on March 29, 2024

from react-admin.

prestontighe avatar prestontighe commented on March 29, 2024

@kodepareek Did you use @alexeyoganezov changes or did you try a custom solution?

from react-admin.

prestontighe avatar prestontighe commented on March 29, 2024

@kodepareek Oh I think it's in this thread correct?

from react-admin.

kodepareek avatar kodepareek commented on March 29, 2024

from react-admin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.