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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Allow developers to differentiate the checkbox selection all state #1876

Open
EdmundsEcho opened this issue Jun 11, 2021 · 10 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Selection Related to the data grid Selection feature new feature New feature or request

Comments

@EdmundsEcho
Copy link

EdmundsEcho commented Jun 11, 2021

"@material-ui/x-grid": "^4.0.0-alpha.31"

Clicking on the checkbox in the header (displayed when using the checkboxSelection feature), does not generate an event object that echos the selected state of the control.

Going off topic describing a solution when what we care is the pain

It took me a bit to track down how to retrieve the value. I'm wondering if it makes sense to put the getter as part of the top-level field prop. So, instead of:

{
   field: "__check__"
   colDef: {
     ...
     valueGetter: function valueGetter(e),
    ...
   },
   api: { ... }
}

Given that this event is only generated when the user click-on the header input field (so no indeterminate state is possible), it might make sense to either generate a synthetic event that echos what we expect when clicking on any checkbox, or given the potential need to compute the state something as follows:

{
  field: {
    field: "__check__",
    isSelected: function valueGetter(e),
  },
  ...
}

Order id 💳

@EdmundsEcho EdmundsEcho added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 11, 2021
@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 13, 2021

@EdmundsEcho 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!

What problem are you trying to solve?

@oliviertassinari oliviertassinari added components: XGrid status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jun 13, 2021
@EdmundsEcho
Copy link
Author

@oliviertassinari Here is the link to the sandbox. Thanks for taking a look. - E

@oliviertassinari
Copy link
Member

@EdmundsEcho This is expected, onColumnHeaderClick is a generic event. You shouldn't be able to access the selection state from it. Could you describe the root problem?

@EdmundsEcho
Copy link
Author

Sure. The header for the checkbox is unique in that it could have a state that reflects whether or not all of the rows have been selected.

The use case: I record when all of the records have been selected in my app's redux-store. I do so with the event "handleToggleAll". The current approach requires using the apiRef:

  const handleToggleAll = useCallback(

    ({ field }) => {
      if (field !== '__check__') return;
      
      //
      // This is the current approach that makes an assumption about
      // *when* the state was updated.
      //
     const isSelected = apiRef.current.getSelectedRows().size !== 0;
      
     dispatch(
          toggleValue(
            nodeId,
            identifier,
            [],
            isSelected,
          ),
        );
    },
    [
      apiRef,
      dispatch,
      identifier,
      nodeId,
      ],
  );

@oliviertassinari oliviertassinari added component: data grid This is the name of the generic UI component, not the React module! and removed components: XGrid labels Jun 20, 2021
@oliviertassinari
Copy link
Member

The use case: I record when all of the records have been selected in my app's redux-store. I do so with the event "handleToggleAll". The current approach requires using the apiRef:

@EdmundsEcho OK, this starts to be interesting. (We should have started there, the rest of the information provided, we can't do anything with it). So, the problem is:

How can developers know if the end-user has selected all the rows? Now, we need to refine what selected all the rows to mean, because there are different versions:

export type GridSelectionModel = GridRowId[];

What we would likely need is:

/**
 * Set the selection model of the grid.
 */
export type GridSelectionModel = {
  /**
   * The selected rows.
   */
  ids?: GridRowId[];
  /**
   * - false, a couple of rows are selected.
   * - 'page', all the rows on the page are selected.
   * - 'all', all the rows of the dataset are selected.
   * The value of this property is not taking into account how the filtering is configured (Select everything vs. Just filtered)
   */
  selectAll: false | 'page' | 'all';
};

@oliviertassinari oliviertassinari added new feature New feature or request and removed status: waiting for author Issue with insufficient information labels Jun 20, 2021
@oliviertassinari oliviertassinari changed the title The event generated when clicking on the checkbox in the header is missing accessible 'isSelected' prop [DataGrid] Allow developers to differentiate the selection all state Jun 20, 2021
@EdmundsEcho
Copy link
Author

EdmundsEcho commented Jun 21, 2021

@oliviertassinari If I'm tracking your thoughts correctly here,

Identifying when all rows have been selected is likely a useful property to make part of api (one way or another). Yes?

I believe the grid is tracking this state already. I say that because the grid only displays the version of the checkbox = checked in the header when all of the rows are selected; true even when I reach that state manually by selected one record at a time. However, I could not find the prop in the api.

The way I'm having to do so now is as follows:

apiRef.current.getAllRowIds().length ===  apiRef.current.getSelectedRows().size,

On a related note, what the user intends when they hit the "select-all" toggle in the header can be a bit tricky. This said, a canonical interpretation likely exists.

Keeping in mind that there are a couple of events that can get the grid to this "all rows selected" state

  • the user clicks on the header's checkbox
  • the user manually selects all of the records

There are a few possible ways to interpret what a user means when they hit the "select all" checkbox in the grid header

  • select all rows in the current view (visible only)
  • select all rows in the grid (visible or not)
  • select all filtered rows (visible or not)

The latter is likely canonical when there is an active filter. Otherwise, it's likely select all, visible or not. The tipping point for this last point of view: it's much easier to manually select what's in a view, than have to view/page through everything in order to select all.

Does this make sense?

Finally, I noticed the topic mentioned when tracking the selection model when using server-side pagination. Perhaps the following may be useful.

Absolutely, the grid should have the capacity to "accumulate" the selected ids when using server-side pagination (a trivial/obvious given when using client-side).

One challenge: How display all when not all of the rows have been loaded into the grid? The solution I'm using is to "model" the selection model as a function, not a value per se. If the selection model is a "set", then the function is a "set generator". So, when the user hits "select all", the selection model is a function that will set the initial state accordingly.

If this is not done at the right time, the user will suffer a "flash" or re-renders: unselected -> selected. Using the api directly to apply the "set generator" solves this problem.

@fstivicic
Copy link

Still needing this feature

@jmsims2
Copy link

jmsims2 commented Apr 4, 2023

Any updates on this? We have licenses for data grid pro and are trying to find a way to do select all with infinite scrolling, with data loaded server side. My only idea so far is to add a custom select all checkbox which tracks some select all state and add ids into the rowSelectionModel as the server loads them if selectAll is true. Not sure how that would impact perf....hopefully not too much?

@EdmundsEcho
Copy link
Author

EdmundsEcho commented Apr 5, 2023

@jmsims2 That's what I do... I track whether the person hit the select all button. I use that state to know how to display what comes from the server. Separate from that, I ended-up maintaining a "selected list" separate from the grid (I don't send real-time updates to the server). The list is irrelevant when the select-all state is true, and cleared when the select-all is first cleared. So, what finally is sent back to the server is a list, and "select-all" state. I need both to represent the users intent.

If your tracking this far, because I had long lists that users paged through, I actually used the "select-all" state to know how to interpret what was in the "selected list".

  • select-all + empty list = select-all
  • select-all + items in list = select-all except items in the list
  • select-none + empty list = select-none
  • select-none + items in list = select items in list

I could not figure out a simpler way.

@youngmoon715
Copy link

Just ran into the same problem.
There seems to be few ways to fix this issue:

  1. There is a details argument on onRowSelectionModelChange. it returns undefined in every single scenario. That should return "select-all" so that we know what type of action it is performing
  2. Allow us to pass a custom function to select all functionality.

Right now, I'm opting to add custom checkbox columns instead of using the one provided by Datagrid.

@romgrk romgrk changed the title [DataGrid] Allow developers to differentiate the selection all state [DataGrid] Allow developers to differentiate the checkbox selection all state Oct 11, 2023
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! feature: Selection Related to the data grid Selection feature new feature New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants