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

[Feature request] Grid multi-levels grouping - access to inner rows in grouping row #2629

Open
1 of 3 tasks
karczk opened this issue Jan 9, 2020 · 3 comments
Open
1 of 3 tasks
Assignees
Labels
enhancement Grid The DevExtreme Reactive Grid component

Comments

@karczk
Copy link

karczk commented Jan 9, 2020

I'm using ...

  • React Grid
  • React Chart
  • React Scheduler

Description

I want to render checkbox to check/uncheck all nested rows. An example to give the idea (custom grouping row component), grouping by A property, then by B and finally by C.

obraz

I use TableGroupRow with custom cellComponent to render grouping row (with checkbox). Unfortunately there is no access to inner groups or rows when group is expanded. Please provide a tree structure with inner groups (better) or flatten rows (all nested) data. It should be a part of row object (cellComponent props) and available regardless of the expanded state.

How it is now.
Inner rows can be read only when group is collapsed, two approaches:

  1. Template feature: Grid group rows display children quantity #1705 (comment)
  2. Hack, direct access to collapsed rows using row property (symbol). When group is expanded then property is not available.

The mentioned hack refers to Symbol(Symbol(group)_collapsedRows), please note that collapsedRows comes from solution no. 1 (template extends row object)
obraz

@karczk karczk changed the title [Featrue request] Grid multi-levels grouping - access to inner rows in grouping row [Feature request] Grid multi-levels grouping - access to inner rows in grouping row Jan 9, 2020
@ushkal ushkal added enhancement Grid The DevExtreme Reactive Grid component labels Jan 9, 2020
@ushkal ushkal self-assigned this Jan 9, 2020
@ushkal
Copy link
Contributor

ushkal commented Jan 9, 2020

Hi @karczk ,

Thank you for this suggestion. We’ll consider implementing it in our future releases.

@karczk
Copy link
Author

karczk commented Jan 9, 2020

@ushkal I was able to find the workaround, but it's an ugly hack ;) Requested feature is still needed to simplify everything.

Scenario:
grouping by country -> city -> team (build-in grid feature)

Component:

<TableGroupRow
    cellComponent={props => /* investigation */ } />

Case:
Let's investigate city group when grouped value equals to "Warsaw".

Problem to resolve:
How to know whether checkbox should be checked/unchecked/in indeterminate state?

Expected result:
obraz

Solutions

  1. Check nested rows directly: broken, available only when group is collapsed. New feature requested in here (discribed in my first post).
  2. Read grouping path and figure out the nested rows. Undocumented, may be broken with the new version but working:

How to get current column (key):

props.column.name
-> "city"

How to get path (keys):

takeWhile(grouping.map(x => x.columnName), x => x !== props.column.name, true) // true includes the last one
-> ["country", "city"]

How to get path values (hack 🙈):

props.row.compoundKey.split("|")
-> ["Poland", "Warsaw"]

How to get the nested rows:

With some computation (keys.reduce((prev, curr, index) => /* code */, allRows)) we can find nested rows (we have columns and rows in scope). Issues:

  • reverse engineering: getCellValue and criteria should be used if implemented
  • path values are not strongly typed (e.g. null, other types than string)
  • api is undocumented (compoundKey) and it's for react key..., may be broken with the new version

@ushkal
Copy link
Contributor

ushkal commented Jan 10, 2020

@karczk Your approach is correct. However, to achieve the maximum performance, I recommend you extract these calculations to the Getter so that they will be recalculated only when the grouping changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Grid The DevExtreme Reactive Grid component
Projects
None yet
Development

No branches or pull requests

2 participants