I'm trying to figure out a way to highlight a node (add a class) when the user clicks on it. I have an onClick handler, but I only have access to the node, not to the display element, nor do I have a way to customize the template of a node. Any suggestions on how I can do this? If it matters, I do not need checkboxes, so have them disabled, so could use the isSelected state for marking a node as needing a highlight.

Is it possible to use radio button instead of checkbox?

Can I achieve it by using custom template?

Hello!

Is there a way to mark as checked some checkboxes, as in my DB?

Thanks in advance.

I am trying to load the data from external APIs. data not loading if i use promises.
having issues with dynamic loading.
Somehow managed with $timeout, but looking for perfect solution.

So folks can more easily skin their tree nodes without a custom template.

See #27

Thanks for the great directive.

I am not able to invoke the change-handler.
In my html, i have it as below

<div id="testId"
                         ivh-treeview="testData"
                         ivh-treeview-expand-to-depth="-1"
                         ivh-treeview-filter="testSearch"
                         ivh-treeview-change-handler="otherAwesomeCallback">
                    </div>

In my Controller, i have

$scope.otherAwesomeCallback = function(node, isSelected, tree) {
                // Do soemthing with node or tree based on isSelected
                alert("CALLED otherAwesomeCallback ");
            };

but this function is never called when i make select/un-select an item.

I have a case where I need to have some specially formatted values place in the tree node like:

Something <span class='blah'>special</span> goes here

Currently it is showing the html encoded string and not the actual html elements. Is there a way to get that to work currently?

E.g. to:

• Change node appearance
• Select/deselect a node (see #14)

Hi, I get this error when I load my trees.

Error: b is undefined

I don't know if it's because the data for the trees isn't available directly after the page loads, they are fetched from a db and then populates the trees, any idea?

See #10

Hi guys!

Using this as example:
http://jsbin.com/mojub/3

If you type ne in the input filter, it will show the result list like this:

• Mustachio
  • Cane
  • Headphones

Then, if you click in the Mustachio item, all items will be checked as expected.

But if i remove the ne from the filter, you'll see that all items are checked: Mustachio, Cane, Monacle, Umbrella and Headphones.

I think the expected result is maintain just the items checked with the filter. Then, if you remove the filter, will see the items unchecked, and if you want all of them checked, you will need to click in the Mustachio again..

This is my suggestion. What do you think?
Unfortunately I don't have XP to improve this yet 😞

Hi @jtrussell
I'm using this treeview with asp.net mvc and have a problem with displaying selected items. I had to put all items into $scope because it was only way to set them dynamically through JSON so currently I have something like this:

$scope.treeData = {};
$scope.update = function () {
$http.post('/Home/TreeSection', data = { IdService: $scope.new.Reservation.IdServiceTest.IdService }).success(function (data) {
$scope.treeData = data;
});

and in my html view only:

data-ivh-treeview="treeData"
data-ivh-treeview-use-checkboxes="true"
data-ivh-treeview-filter="myQuery">

Do you have any idea how to put all selected: "true" objects into another array or how to do a copy of $scope.treeData only with selected objects dynamically?
I need this to put the selected items into database and also to display full path of selected items like:
Mustachio/Cane/Top hat

And one more thing is filtering. It is working great but I need expanding from default 1 level into last filtered children because now I can see only the parent label and have to expand by click to the filtered value. For the better visual look i wish to have bolded result of searching ex. if I type OP would be cool if OP in Top hat would be bolded.

In our opinion this directive has reached a level of maturity and stability such that we'd like to nail down the api and feature set with a shiny new major version number. This is a request for comments on anything related to desired features, api changes, examples/documentation, etc. that should be addressed before that happens.

Here's our short list of items:

Features and Fixes

• Allow for programmatic expand/collapse (#24)
• Make node templates customizable (#25)
• Be able to configure all options independently (#32)
• Rename "click" handler to "toggle" (#45)
• Investigate swapping callbacks to be expression based (#55)

Examples and Demos

E.g. create a jsbin from the template in the README for...

• Default selected state/validate on startup (#26)
  • Programmatic expand/collapse
• Custom Node Templates
  • Global template
  • Inline template
  • Options hash template
  • Transcluded template
• Custom inline template (as option)
• Custom inline template (as transcluded content)
• Toggle Handler
• Change Handler (fix for new syntax)
• ivhTreeviewMgr dot
  • select / deselect
  • selectAll / deselectAll
  • selectEach / deselectEach
  • expandTo / collapseParents
  • expandRecursive / collapseParents
  • validate

Documentation

• Document which classes are provided on which elements. E.g. ivh-treeview-node-label, etc. (#44)
• Better site (gh-pages branch in progress). (#46)

Things to consider making opt-in/opt-out-able:

• Watching children lengths for changes, for large static trees this is a fair bit of unnecessary watching.
• Inline tuple declarations, again a lot of extra checks for something that may not be used very often

Possible optimizations...

• Only render child nodes when parent is expanded (#62)
• ivhTreeviewMgr.sanitize - Sanitize a node, i.e. remove all treeview attributes

I have added the dist to my project and the tree forms but both twisties are shown prefixing each node and neither the + or - can be clicked to expand and contract nodes.

My trees will always be expanded and I would like to be able to mark a node as selected by clicking it.

Is there any way to do this?

Need a mechanism to expand/collapse the tree recursively.

It would be nice if one had a way to configure multiple tree views differently, e.g. twistieTemplates
I'm new to angular, so this could just be ignorance on my part, but it seems like a number of items in the config are global for all tree views.

Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 7 of the expression [filter:bagSearch] starting at [:bagSearch].
http://errors.angularjs.org/1.2.16/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=7&p3=filter%3AbagSearch&p4=%3AbagSearch
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:78:12
at Parser.throwError (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:10266:11)
at Parser.parse (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:10217:12)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:11048:37
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:6478:29
at forEach (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:330:20)
at nodeLinkFn (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:6450:11)
at compositeLinkFn (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:5986:15)
at nodeLinkFn (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:6573:24)
at compositeLinkFn (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js:5986:15)

thats my template:

<div ng-init="category.load()"
              ivh-treeview="category.choices.entity.children" 
              ivh-treeview-filter="category.query"
              ivh-treeview-options="category.treeOptions"
          >
              <script type="text/ng-template" id="nodes-template.html">
                  <div class="tree-node">
                    <span ivh-treeview-toggle>
                      <span ivh-treeview-twistie></span>
                    </span>
                   <span class="ivh-treeview-node-label">
                     {{trvw.label(node)}}
                   </span>
                   <a class="btn btn-xs btn-primary pull-right" ng-click="alert('foo')"><i class="glyphicon glyphicon-star"></i></a>
                   <div ivh-treeview-children class="clearfix"></div>
                 </div>
              </script>          
</div>

the ng-click inside the a doesnt fire, so no alert! what might be wrong here?

As a developer I'd like to use my own templates for tree nodes so that I can skin the tree more effectively and make tree nodes more interactive.

When using a pattern object as a filter expression we lose the deep searching that's built into using filterFilter with just a string. We should either gather the children in this case to check them as well or have visible children force their parents to also be visible.

If some nodes are initially selected the view should update parent/child nodes to accommodate.

Is there a way to display a different leaf for items in my treeview based on an additional parameter I provide (something boolean like hasChildren)? I'm building a folder/file tree and want to display a file icon next to files so users don't think its just another folder that can be expanded.

I'm loading each section of the tree as it's expanded, so I know the twistieLeafTpl parameter could normally be used but this obviously doesn't work when child nodes haven't yet been loaded.

As a developer I'd like the ability to expand or collapse a given node (possibly recursively) using the treeview manager so that I can add custom, external, controls to my user interface.

the tree renders nicely, filtering collapsing works, the click-handler is triggered, but its in the wrong scope (Window) i expect it to be in the ControllerScope.
setting the clickHandler from the Controller.treeOptions wont worked as described in the docs.

i need the correct scope to do other things in the controller.

here me faulty code:

class Controller {

    query;   

    tree = {
       caption : "foo",
       children: [
           {caption:"bar"}, {caption:"baz"}
       ]
    };

    treeOptions = {
        useCheckboxes: false,
        labelAttribute: 'caption'
    };

    select(node) {
        console.log(this, node); //scope is window here
    }
}

export default () => {
    return {
        restrict: 'E',
        bindToController: {
            type: '@',
            label: '@'
        },
        scope: true,
        controllerAs: 'category',
        controller: Controller,
        templateUrl: 'components/product/values/category.html'
    };
};

<div 
    ivh-treeview="category.tree"
    ivh-treeview-options="category.treeOptions"
    ivh-treeview-click-handler="category.select"
>
</div>

Here's my jsbin http://jsbin.com/figeqa/10/
I'm concerned about the search process, obviously this doesn't work unless the folders are already open and expanded. Any ideas of a way the user could search the entire tree without opening up each folder? This could be done at API level and a tree structure of results returned as JSON, it's just how that would be displayed to the user.

Hello! First-off we love this module. We were hoping you could help us.

We are looking to bind text inputs to the right of the tree-view.

We are currently using the beta with custom templates and have what you can see in the image linked but we would like to have them behave or be data bound with the nodes they are attached to.

We have been struggling with this for a while now. We were hoping you could shed some light on the best way to accomplish this.

Here’s the image:

http://i.imgur.com/bvaPUjj.png

Thank you!

Hi @jtrussell!

I found a strange behavior in the search filter.

Using this as example:
http://jsbin.com/rigepe/1

In the search field, type:
true

All items will be hidden, except Mustachio. And if you mark it as checked, all items will be displayed.

Now, clear the search field and type:
false

All items are displayed.

But you type some inexistent word (considering both key and value from the list - as value for the search), like:
xyz

All items will be hidden as expected.

I think this is related to the filter function in AngularJS, checking all keys and values in our list.

Can you confirm this?

Maybe before sending to the Angular filter, we could clean our collection, removing unwanted keys/values..

Is there a way to extend the filter function in the ivh-treeview?

Thanks! 🍻

When someone clicked on that circle by the left side of 'Wallet', I need to attach some events on it, do you have any solutions?

We'd want to make the clicked node and its owning tree available to the expression...

I.E.:

<div ivh-treeview="fancy.data"
     ivh-treeview-toggle="fancy.toggleCb(ivhNode, ivhTree)"
     ivh-treeview-cb-click="fancy.onCheckBoxClick(ivhNode, ivhTree)"></div>

This callback is really run when a node is toggled, i.e. it's possible to click on a node and not trigger the callback. Should be renamed to avoid confusion.

Let's get this in on a release candidate rather than introduce a breaking change in a 0.x release.

I'm trying to use angular-ivh-treeview with angular js virsion 1.3.7. Typing into input textbox changes the nodes but is not properly filtering according to the input text.

Sample :
http://jsbin.com/yijowifaco/2/

I googled for lazy loading option on clicking of (+) sign for parent nodes. But i couldnt find any handlers for doing so on parents. Is there anyway to bind click event to (+) sign. If it is possible can you also let me know how i can get current selected node and update the JSON based on selection.

My requirement is like user on clicking parent should load contents that will be fetched by an API call. Once its is done user might select some checkbox or all. Once all selections are done i have to send selected contents alone as JSON to save in DB. Is it possible to do, can you share some ideas. Thanks in advance.

I needed some additional functionality for the treeview:

1. Disable expand/collapse toggling, if a user clicks on a node label
2. Disable triggering a node click, if a user clicks on a node twistie

I ended up adding an option for (1) and updating the toggle directive accordingly. For (2) I separated the click handler from the toggle directive by creating a click directive and updating the default node template in the options.

If this is functionality you'd be interested in and you're not working on something similar at the moment, I'd like to open a PR with these changes.

Nice component. It would be great if we could set the click handler so that a node can be selected (checkbox selection) when clicked, instead of having to click on the checkbox itself.

Right now we've just got a silly demo listed as the main site for this repo. Would be nice to get some gh-pages going with multiple examples and a bit more polish.

/cc #27

Right now, when you select a parent, it will also select all children.
(We can change the displayed value with by setting the indeterminateAttribute to __ivhTreeviewIndeterminate but that doesn't change the child selection behaviour)

It would be nice that we could select a parent without automatically selecting its children.
Do you see an easy solution for that? Thanks!

Hi, @jtrussell Nice to meet you again! : )

I'm back with a question, for example, If I checked several checkboxes in the tree,
then I need to send them to the API, the data structrue may look like this {"checked": "4, 99, 23, 112, ..."}
is there some function can do this or how can I access the isSelected model?

I included this ivh treeview in my angularjs project to display tree structure. I followed this link
http://jsbin.com/guzopedimi/1/edit?html,js,output
Now when its gets loaded i use same data specified in link. For me only the parent node(ie Pen is checked) is getting selected and child nodes are not selected(values under Pen node is not checked while loading) even if parents value should be inherit.
When i am unchecking and checking the parent Node then all the child nodes are also getting checked.
Can you help me with this issue.

Anyway the tree can be expanded during filtering to display the actual result(s)? Thanks for this, btw. Great work!

https://github.com/iVantage/angular-ivh-treeview/blob/master/src/scripts/services/ivh-treeview-settings.js#L27-L36

If you set a custom expandedAttribute using the view attribute ivh-treeview-expanded-attribute, when using functions like ivhTreeviewMgr.expand() and ivhTreeviewMgr.expandTo(), they update the default __ivhTreeviewExpanded property instead of the custom one defined. It appears the custom expandedAttribute is only honored if you configure it through the ivhTreeviewOptionsProvider.

http://wwwendt.de/tech/fancytree/demo/#sample-ext-childcounter.html
Above jQuery Tree shows the number of children inside the unexpanded parent node.
Can you please consider this as an enhancement request and please do the needful development?

Thanks and Regards,
Raj

Rather than click. As is the view does not update correctly when models are changed programmatically. Simple case - have two trees working off the same collection. Items will be checked in sync but indeterminate states won't stay synced.

Getting weary of having to always wrap a root node in an array.

To support dynamically adding/removing child nodes we have watchers set up for each node's children. We should let folks opt out of those watchers if they're trees are static.

Is there a way to configure the component so that the parent checkbox can be selected without checking all of the children?