khan4019 / tree-grid-directive

Need one or more maintainer for this! comment or email me if you are interested
http://khan4019.github.io/tree-grid-directive/test/treeGrid.html
347 stars 183 forks source link

Filter in tree in controller #144

Open LTroya opened 7 years ago

LTroya commented 7 years ago

Is currently a way to filter in controller?

I am doing it this way for the moment:

function treeSearch() {
       // I tried using angular.copy instead of this method
       // to reset the data but it doesn't work
       on_treeData_change();

        var results = $filter('searchFor')(scope.tree_rows, scope.queryString, scope.expandingProperty, scope.colDefinitions, true);

        $timeout(function () {
             scope.tree_rows = results;
        });
 }

The problem I have with this solution is if I expand or collapse a filtered object it expands all nodes from original tree. It should expand filtered nodes

The weird is ng-click only do this

row.branch.expanded = !row.branch.expanded

This was my original template

<tr ng-repeat="row in tree_rows | searchFor:$parent.filterString:expandingProperty:colDefinitions:true track by row.branch.uid"

But with this solution I can't expand or collapse nodes because it is filtering all the time

If there is a way to do it I will appreciate any hint

torsten-sauer commented 7 years ago

Could you please set up a Plunker? I don't understand what's actually your problem ;-)

But to answer your question: yes, you can filter via controller, you only need to fill the filter string into the scope variable filterString.

LTroya commented 7 years ago

Here is the plunker

https://plnkr.co/edit/wXFDsJyWIYvqh7tCqats?p=preview

I add an event to the directive to pass the filterString and search through the tree. Add 123456 to the input, then click Search. If you click on expand the single result, it expands all the tree.

The modifications I made are in 117-131 lines in the tree-grid-directive.js

torsten-sauer commented 7 years ago

Ah, now I think I got what you trying to do...

I think you made it a little bit to "complicated".

I created - based on your plunker - another one: https://plnkr.co/edit/mSkYNjm6NpuOQoWxOYMA?p=preview

What did I change?

Now the click on the search button sets the content of the scope variable query to the scope variable filterString which gets picked up by the directive. This would be the "smallest" impact, but there might be more complicated / feature-rich solutions, that might be worth a PR for the tree grid.

LTroya commented 7 years ago

Oh, I didn't think in that solution for search. But this is what I want to achieve

I want to expand the child of a filtered node. For example, if you search for 123456 it returns Fondo 1234567, but I can't expand that node. That make sense because the children doesn't match the string I was looking for. However, if I add an on-click handler to the tree I can see their children on the console while the UI doesn't show them

I think the problem was this line in the original template:

searchFor:$parent.filterString:expandingProperty:colDefinitions track by row.branch.uid

It is constantly filtering the tree. That was the reason I want to do the filter in the controller, that way I could expand the node after I filter them

torsten-sauer commented 7 years ago

Please take a look at #138 We discussed to introduce a hidden searchable column on all children with the searchable content of their parent. With this content, the filtering would work the way you describe.

Otherwise the filter logic in the searchFor function needs to be modified. If you can go on with the hidden colum solution please try it.