Filter doesn't work correct with tree

[SergeyBeloglazovRL]

The top filter "And title including" doesn't work correct with the grid with a tree. SlickGrid-2.4.38 E.g.: /examples/example5-collapsing.html

[6pac]

I remember this one. The reason is that the parent nodes of 11 are being filtered out, so it no longer has a place in the list. This is a clash of paradigms, and there are two possible behaviours: (1) keep the filtered nodes' parent nodes (even if they don't match the filter), and (2) apply the filter, then re-apply the tree (resulting in nodes at depth possibly becoming top level nodes.
Which one are you after?

[SergeyBeloglazovRL]

Thank you for the answer! Yes, I have made additional experiments and have came to the conclusion, you have wrote. If a parent have to be hidden, children are hidden too. I don't think, that reassembling tree (the 2nd way) is intuitive for user. I think the grid should show parent lines, even they don't match the filter, if any child does. I think it should be like a recursive file/directory searching when you get full paths with upper subdirectories in results, even if their names don't match a criterion.

[ghiscoding]

The Example that was created originally was created only to demo the indentation part and it wasn't caring about sorting/filtering as a Hierarchical Tree grid would do. I had worked on this last year, with the help of another user, in my own repo but never managed to merge the feature here. My code has it all, it has the correct Filtering (if you search for something that is found in the child, then the parent will remain displayed (original demo doesn't do that), that is the correct way to use Tree Data) and the Sorting also work.. all of that is possible via a few recursive functions (because Tree Data is all about recursion). You can take a look at the Example example-tree-data.html, it requires a new plugin that we created specifically for handling all recursion and stuff related to Tree Data slick.treedata.js

here's an animated gif of it

That code was then used in 3 other libs written in TypeScript, I use 6pac/SlickGrid fork for the main code but the Tree Data is outside of this (I have few services in my libs, like FilterService, SortService, ...)... anyway all that to say, here's 2 live demos in my libs using the technique written in previous paragraph. Slickgrid-Universal Example 5 and Example 6, my other 2 libs also have the same Examples (Angular-Slickgrid and Aurelia-Slickgrid)

It's a long reply but basically, if you want to implement that in pure SlickGrid JS, take a look at the Example I provided the links in the first paragraph. I should merge it back here eventually, just never took the time because the aggregation part was never really finished (which is also missing in my own libs)

[SergeyBeloglazovRL]

Thank you, @ghiscoding! I will try using your solution.

[SergeyBeloglazovRL]

@ghiscoding Now I'm using your version. Thank you again! I've got some issues, made some workarounds. Wrote in repo.

By the way, I have found a more convenient example for the tree filtering. It's angular UI Grid. http://ui-grid.info/docs/#!/tutorial/Tutorial:%20215%20Tree%20View But it isn't seemed like a complete thing ready for using. So I continue using https://github.com/ghiscoding/SlickGrid/

Angular UI Grid filters tree data hiding children, that don't match the filter: It contrasts with ghiscoding's SlickGrid behaviour:

Filtering the root:

[ghiscoding]

@SergeyBeloglazovRL I will create a PR soon to merge this into this repo and you can push some fixes if you want in the future. in your case I think you want to click that button to exclude child from showing up in the tree (it's just a setting to enable/disable)

I don't use that code directly in my libs, I just took some pieces of that code (for example showing all child of the tree when filtering is an option I don't have in my libs). I had lots of help from another great person to build that and he did that piece of include/exclude child in the tree when filtering and since that part is not in my lib, I don't remember how it works but I remember it came from a demo found on Ag-Grid which was an extra config to optionally use

[SergeyBeloglazovRL]

Unfortunately, I can't see any difference whether it is set on or off:

[ghiscoding]

again sorry but I'm not sure what that code does, I'm however pretty sure it would be that flag, you can look at the code itself. I can't help you more than that, it is not the code I use in my own libs (it's only a portion of it). So you'll have to troubleshoot yourself

[SergeyBeloglazovRL]

Ok, thank you for helping!

[ghiscoding]

@SergeyBeloglazovRL So I tried troubleshooting the code and I was right on the flag, and if we do use it and modify this piece of code from slick.treedata.js with the following (adding an if wrapper as shown below)

function innerAddAll(child, collapsedFlag) {
  //now works with nested array of objects or object of objects:
  const iterable = (child instanceof Array) ?
    child :
    Object.values(child) || [];
  for (let id of iterable) {
    const childCopy = { ...id };
    delete childCopy[childrenPropName];
    childCopy.__collapsed = collapsedFlag;
    //filteredChildrenAndParents.push(childCopy);
    delete childCopy[childrenPropName];
+   if (!gridOptions.excludeChildrenWhenTreeDataFiltering) {
      filteredFlatObj[id[identifierPropName]] = {...childCopy, ...aggregatorPropsInitObj};
+   }
    tempFlatObj[id[identifierPropName]] = {...childCopy};
    id[childrenPropName] && innerAddAll(id[childrenPropName], collapsedFlag);
  }
}

then the demo works as expected. I'm not sure it breaks anything but hey at least it starts to work so give it a try. I'll push a PR soon including that change.

[SergeyBeloglazovRL]

Thank you!

[6pac]

Happy to merge this to the base Slickgrid if that's straightforward to do.

[ghiscoding]

This is overly complex and it will not be addressed in this project, the example were merely for demo purposes and we know that filters are not working as expected.

However if you still need this feature, I do have a full Tree Data feature in my other project Slickgrid-Universal which is using SlickGrid, you can see these 2 demos Example 5 - parent/child and Example 6 - hierarchical, it works correctly with Filter, Sorting and I even added Tree Data Aggregator (totals)

If anyone want to fix the Tree Data filters in here, please go ahead with a Pull Request, but it will not be fixed by us maintainer and so I will close this issue because I also provided an alternative