khan4019/tree-grid-directive

Filter in tree in controller

Opened this issue · 5 comments

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

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.

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

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?

  • I reset your changes to the tree-grid-directive.js
  • I removed your tree grid template (to use the default one to keep it simple)
  • I changed line 28 in your script.js to the following: $scope.filterString=$scope.query;

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.

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

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.