Datagrid column filters do not play nice with tree grid

[chrisfried]

We've been experimenting with tree grid on the data catalog project, and have run into a number of issues that make it less than useable. Issues were found in 4.11. Most of them are likely more to do with ids-enterprise, but I'm putting them all here. Writing this on my phone, I can add screenshot examples as needed next week.

• 1. Behavior: Filter only matches top level tree items.
  Expectation: Filter should match items lower in the tree, displaying the matched item as well as the parents, grandparents, etc. for context~~

• 2. Behavior: Matching a row with children continues to display the expand/collapse button, but clicking it doesn't do anything. Also sometimes causes general weirdness with indentation that I'll try to reproduce next week.
  Expectation: If a parent is a match, it should be expandable to view all children. I'm less sure of what the behavior should be if one of its children is also a match...~~

• 3. Behavior: Tree grid formatting is misleading. The indentation of a child matches the indentation produced by the expand/collapse button on the parent, making it appears as if they are in the same level.
  Expectation: Text of sibling elements should all have matching indentation, the expand/collapse button should not change indentation

• 4. Behavior: Applying custom formatting to the column with the expand/collapse button with an Angular component does not seem possible without breaking the tree.
  Expectation: Custom formatting should remain possible alongside tree grid

[tmcconechy]

I think we should move this to EP project. Can you move it for me @clepore

I numbered your issues so i can respond to them. Also we need a way to reproduce these better.

1. This issue may have been fixed on SOHO-6932: Searchfield filters out child rows in tree grid #437 can you retest on http://4130-beta0-enterprise.demo.design.infor.com/components/datagrid/test-tree-filter.html

2. Need a way to reproduce this. Could be related to SOHO-7933: updateRow() causes a row of tree datagrid displayed with wrong indent #405

3. Need an example for this.

4. This could be possible if you copy the tree formatter code entirely and add your customizations to your version of it https://github.com/infor-design/enterprise/blob/master/src/components/datagrid/datagrid.formatters.js#L368-L378

[chrisfried]

I'll look at the others, but I can respond to 4 now: I did try copying the Tree formatter code into the component, but the code that gives the expand/collapse button function wasn't finding the button.

[tmcconechy]

Ok. I was thinking it would be better for 4. to make the concept of a subFormatter so you can specify that and in some formatters that portion can be formatted out. Fx to isolate the text part of the tree formatter.

[chrisfried]

3 is an issue inherent in the design of the tree grid:

[tmcconechy]

From my recollection this was discussed during the initial design but the "expected" version does seem more readable to me. What do you think @kayiuho ?

[chrisfried]

I think 2 was also resolved by 1 being fixed. If I can reproduce it in enterprise-ng again, I'll let you know.

[kayiuho]

@tmcconechy just from looking at the visual comparison, the "expected" version does seem to make more sense in terms of visual hierarchy. It could be further investigated/tested with different states to see if the pattern breaks at any level.. maybe a prototype could help.

[tmcconechy]

#3 was pushed in Dec sprint.

[tmcconechy]

In summary

1. Was fixed on another issue SOHO-6932: Searchfield filters out child rows in tree grid #437
2. Was fixed on another issue SOHO-6932: Searchfield filters out child rows in tree grid #437
3. Was fixed this sprint by @chrisfried - thanks!
4. Still an issue

So we have to divide this ticket. Can you please make a new issue for #4 if you still want it @chrisfried
Then we can sort this out later as this ticket is moved to QA for the fixes you made. Better if you make the ticket so its on your name. Thanks!

[brianjuan]

Behavior number 2 still happens when you apply filter that match the parent node. Expand/collapse button is displayed but doesn't do anything.
Steps:

1. Go to https://4140-beta0-enterprise.demo.design.infor.com/components/datagrid/test-tree-filter.html
2. Apply Contains filter on Task column with the word "HMM"
3. Try to Expand/Collapse the first row, nothing happens.

[tmcconechy]

@deep7102 Can you take a look at this extra case?

[tmcconechy]

At the moment the reason that last part on #2 doesnt work is there are no children that match under there. I notice it says "Expectation: If a parent is a match, it should be expandable to view all children."

Do we really think it should show the children even if they dont match? Im not so sure, and leaning towards this being the correct/acceptable behavior?

What do we think? @EdwardCoyle @clepore @pwpatton @deep7102 @brianjuan @chrisfried ?

[pwpatton]

For default search behaviour I think it could depend. Maybe a switch is in order (allowChildExpandOnMatch) or something.

In landmark we have an example where we allow expansion of a matching node even when the children don't match the search criteria (we are lazy loading and manage all this behaviour ourselves w/o the default search/filter since we cannot do this in memory).

[deep7102]

Add this as api settings allowChildExpandOnMatch: boolean

allowChildExpandOnMatch === true

• if only parent got match then add children nodes too
• if one or more child node got match then add parent node and all the children nodes

allowChildExpandOnMatch === false

• if only parent got match then (disable|hide|anything-else) +/- button and no add children nodes
• if one or more child node got match then add parent node and only matching children nodes (as it doing now)

[tmcconechy]

Sounds like that would cover it - big change?

[deep7102]

Could be thinking thru it need to track filter and filter nodes and depths etc

[tmcconechy]

Ok i suggest we make a new issue for later then. This isn't totally in scope at this time.
So i suggest we close this issue as is @brianjuan

[brianjuan]

I think we're good to create a separate ticket for the implementation of the big changes for number 2.

Will now move this Done, since https://4140-beta0-enterprise.demo.design.infor.com/components/datagrid/test-tree-filter.html is working as expected for all other suggested behaviors.

[tmcconechy]

Added the new issue #1422