Giter Club home page Giter Club logo

angular-ivh-treeview's Introduction

Angular IVH Treeview

Build Status

A treeview for AngularJS with filtering, checkbox support, custom templates, and more.

Contents

Getting Started

IVH Treeview can be installed with bower and npm:

bower install angular-ivh-treeview
# or
npm install angular-ivh-treeview

Once installed, include the following files in your app:

  • dist/ivh-treeview.js
  • dist/ivh-treeview.css
  • dist/ivh-treeview-theme-basic.css (optional minimalist theme)

And add the ivh.treeview module to your main Angular module:

angular.module('myApp', [
  'ivh.treeview'
  // other module dependencies...
]);

You're now ready to use the ivh-treeview directive, ivhTreeviewMgr service, and ivhTreeviewBfs service.

Example Usage

In your controller...

app.controller('MyCtrl', function() {
  this.bag = [{
      label: 'Glasses',
      value: 'glasses',
      children: [{
        label: 'Top Hat',
        value: 'top_hat'
      },{
        label: 'Curly Mustache',
        value: 'mustachio'
      }]
  }];

  this.awesomeCallback = function(node, tree) {
    // Do something with node or tree
  };

  this.otherAwesomeCallback = function(node, isSelected, tree) {
    // Do soemthing with node or tree based on isSelected
  }
});

In your view...

<div ng-controller="MyCtrl as fancy">
  <input type="text" ng-model="bagSearch" />

  <div
    ivh-treeview="fancy.bag"
    ivh-treeview-filter="bagSearch">
  </div>
</div>

Options

IVH Treeview is pretty configurable. By default it expects your elements to have label and children properties for node display text and child nodes respectively. It'll also make use of a selected attribute to manage selected states. If you would like to pick out nodes by ID rather than reference it'll also use an id attribute. Those attributes can all be changed, for example:

<div ng-controller="MyCtrl as fancy">
  <div ivh-treeview="fancy.bag"
    ivh-treeview-id-attribute="'uuid'"
    ivh-treeview-label-attribute="'text'"
    ivh-treeview-children-attribute="'items'"
    ivh-treeview-selected-attribute="'isSelected'">
</div>

IVH Treeview attaches checkboxes to each item in your tree for a hierarchical selection model. If you'd rather not have these checkboxes use ivh-treeview-use-checkboxes="false":

<div ng-controller="MyCtrl as fancy">
  <div ivh-treeview="fancy.bag"
    ivh-treeview-use-checkboxes="false">
</div>

There's also a provider if you'd like to change the global defaults:

app.config(function(ivhTreeviewOptionsProvider) {
  ivhTreeviewOptionsProvider.set({
    idAttribute: 'id',
    labelAttribute: 'label',
    childrenAttribute: 'children',
    selectedAttribute: 'selected',
    useCheckboxes: true,
    disableCheckboxSelectionPropagation: false,
    expandToDepth: 0,
    indeterminateAttribute: '__ivhTreeviewIndeterminate',
    expandedAttribute: '__ivhTreeviewExpanded',
    defaultSelectedState: true,
    validate: true,
    twistieExpandedTpl: '(-)',
    twistieCollapsedTpl: '(+)',
    twistieLeafTpl: 'o',
    nodeTpl: '...'
  });
});

Note that you can also use the ivhTreeviewOptions service to inspect global options at runtime. For an explanation of each option see the comments in the source for ivhTreeviewOptions.

app.controller('MyCtrl', function(ivhTreeviewOptions) {
  var opts = ivhTreeviewOptions();

  // opts.idAttribute === 'id'
  // opts.labelAttribute === 'label'
  // opts.childrenAttribute === 'children'
  // opts.selectedAttribute === 'selected'
  // opts.useCheckboxes === true
  // opts.disableCheckboxSelectionPropagation === false
  // opts.expandToDepth === 0
  // opts.indeterminateAttribute === '__ivhTreeviewIndeterminate'
  // opts.expandedAttribute === '__ivhTreeviewExpanded'
  // opts.defaultSelectedState === true
  // opts.validate === true
  // opts.twistieExpandedTpl === '(-)'
  // opts.twistieCollapsedTpl === '(+)'
  // opts.twistieLeafTpl === 'o'
  // opts.nodeTpl =(eh)= '...'
});

Filtering

We support filtering through the ivh-treeview-filter attribute, this value is supplied to Angular's filterFilter and applied to each node individually.

IVH Treeview uses ngHide to hide filtered out nodes. If you would like to customize the hide/show behavior of nodes as they are filtered in and out of view (e.g. with ngAnimate) you can target elements with elements with the .ivh-treeview-node class:

/* with e.g. keyframe animations */
.ivh-treeview-node.ng-enter {
  animation: my-enter-animation 0.5s linear;
}

.ivh-treeview-node.ng-leave {
  animation: my-leave-animation 0.5s linear;
}

/* or class based animations */
.ivh-treeview-node.ng-hide {
  transition: 0.5s linear all;
  opacity: 0;
}

/* alternatively, just strike-through filtered out nodes */
.ivh-treeview-node.ng-hide {
  display: block !important;
}

.ivh-treeview-node.ng-hide .ivh-treeview-node-label {
  color: red;
  text-decoration: line-through;
}

Demo: Filtering

Expanded by Default

If you want the tree to start out expanded to a certain depth use the ivh-treeview-expand-to-depth attribute:

<div ng-controller="MyCtrl as fancy">
  <div
    ivh-treeview="fancy.bag"
    ivh-treeview-expand-to-depth="2"
    ivh-treeview-use-checkboxes="false">
</div>

You can also use the ivhTreeviewOptionsProvider to set a global default.

If you want the tree entirely expanded use a depth of -1. Providing a depth greater than your tree's maximum depth will cause the entire tree to be initially expanded.

Demo: Expand to depth on load

Default Selected State

When using checkboxes you can have a default selected state of true or false. The default selected state is used when validating your tree data with ivhTreeviewMgr.validate which will assume this state if none is specified, i.e. any node without a selected state will assume the default state. Futhermore, when ivhTreeviewMgr.validate finds a node whose selected state differs from the default it will assign the same state to each of that node's childred, parent nodes are updated accordingly.

Use ivh-treeview-default-selected-state attribute or defaultSelectedState option to set this property.

Demo: Default selected state and validate on startup

Validate on Startup

ivh.treeview will not assume control of your model on startup if you do not want it to. You can opt out of validation on startup by setting ivh-treeview-validate="false" at the attribute level or by globally setting the validate property in ivhTreeviewOptionsProvider.

Demo: Default selected state and validate on startup

Twisties

The basic twisties that ship with this ivh.treeview are little more than ASCII art. You're encouraged to use your own twistie templates. For example, if you've got bootstrap on your page you might do something like this:

ivhTreeviewOptionsProvider.set({
  twistieCollapsedTpl: '<span class="glyphicon glyphicon-chevron-right"></span>',
  twistieExpandedTpl: '<span class="glyphicon glyphicon-chevron-down"></span>',
  twistieLeafTpl: '&#9679;'
});

If you need different twistie templates for different treeview elements you can assign these templates at the attribute level:

<div
  ivh-treeview="fancy.bag"
  ivh-treeview-twistie-leaf-tpl="'-->'">
</div>

Alternatively, you can pass them as part of a full configuration object.

Demo: Custom twisties

Templates and Skins

IVH Treeview allows you to fully customize your tree nodes. See docs/templates-and-skins.md for demos and details.

Toggle Handlers

Want to register a callback for whenever a user expands or collapses a node? Use the ivh-treeview-on-toggle attribute. Your expression will be evaluated with the following local variables: ivhNode, the node that was toggled; ivhTree, the tree it belongs to; ivhIsExpanded, whether or not the node is now expanded.

<div ng-controller="MyCtrl as fancy">
  <div
    ivh-treeview="fancy.bag"
    ivh-treeview-on-toggle="fancy.awesomeCallback(ivhNode, ivhIsExpanded, ivhTree)">
</div>

You may also supply a toggle handler as a function (rather than an angular expression) using ivh-treeview-options or by setting a global onToggle option. In this case the function will be passed a single object with ivhNode and ivhTree properties.

Demo: Toggle Handler

Select/Deselect Handlers

Want to be notified any time a checkbox changes state as the result of a click? Use the ivh-treeview-on-cb-change attribute. Your expression will be evaluated whenever a node checkbox changes state with the following local variables: ivhNode, the node whose selected state changed; ivhIsSelected, the new selected state of the node; and ivhTree, the tree ivhNode belongs to.

You may also supply a selected handler as a function (rather than an angular expression) using ivh-treeview-options or by setting a global onCbChange option. In this case the function will be passed a single object with ivhNode, ivhIsSelected, and ivhTree properties.

Note that programmatic changes to a node's selected state (including selection change propagation) will not trigger this callback. It is only run for the actual node clicked on by a user.

<div ng-controller="MyCtrl as fancy">
  <div
    ivh-treeview="fancy.bag"
    ivh-treeview-on-cb-change="fancy.otherAwesomeCallback(ivhNode, ivhIsSelected, ivhTree)">
</div>

Demo: Select/Deselect Handler

All the Options

If passing a configuration object is more your style than inlining everything in the view, that's OK too.

In your fancy controller...

this.customOpts = {
  useCheckboxes: false,
  onToggle: this.awesomeCallback
};

In your view...

<div
    ivh-treeview="fancy.bag"
    ivh-treeview-options="fancy.customOpts">
</div>

Any option that can be set with ivhTreeviewOptionsProvider can be overriden here.

Treeview Manager Service

ivh.treeview supplies a service, ivhTreeviewMgr, for interacting with your tree data directly.

ivhTreeviewMgr.select(tree, node[, opts][, isSelected])

Select (or deselect) an item in tree, node can be either a reference to the actual tree node or its ID.

We'll use settings registered with ivhTreeviewOptions by default, but you can override any of them with the optional opts parameter.

isSelected is also optional and defaults to true (i.e. the node will be selected).

When an item is selected each of its children are also selected and the indeterminate state of each of the node's parents is validated.

Demo: Programmatic select/deselect

ivhTreeviewMgr.selectAll(tree[, opts][, isSelected])

Like ivhTreeviewMgr.select except every node in tree is either selected or deselected.

Demo: Programmatic selectAll/deselectAll

ivhTreeviewMgr.selectEach(tree, nodes[, opts][, isSelected])

Like ivhTreeviewMgr.select except an array of nodes (or node IDs) is used. Each node in tree corresponding to one of the passed nodes will be selected or deselected.

Demo: Programmatic selectEach/deselectEach

ivhTreeviewMgr.deselect(tree, node[, opts])

A convenience method, delegates to ivhTreeviewMgr.select with isSelected set to false.

Demo: Programmatic select/deselect

ivhTreeviewMgr.deselectAll(tree[, opts])

A convenience method, delegates to ivhTreeviewMgr.selectAll with isSelected set to false.

Demo: Programmatic selectAll/deselectAll

ivhTreeviewMgr.deselectEach(tree, nodes[, opts])

A convenience method, delegates to ivhTreeviewMgr.selectEach with isSelected set to false.

Demo: Programmatic selectEach/deselectEach

ivhTreeviewMgr.expand(tree, node[, opts][, isExpanded])

Expand (or collapse) a given node in tree, again node may be an actual object reference or an ID.

We'll use settings registered with ivhTreeviewOptions by default, but you can override any of them with the optional opts parameter.

By default this method will expand the node in question, you may pass false as the last parameter though to collapse the node. Or, just use ivhTreeviewMgr.collapse.

Demo: Programmatic expand/collapse

ivhTreeviewMgr.expandRecursive(tree[, node[, opts][, isExpanded]])

Expand (or collapse) node and all its child nodes. Note that you may omit the node parameter (i.e. expand/collapse the entire tree) but only when all other option parameters are also omitted.

Demo: Programmatic recursive expand/collapse

ivhTreeviewMgr.expandTo(tree, node[, opts][, isExpanded])

Expand (or collapse) all parents of node. This may be used to "reveal" a nested node or to recursively collapse all parents of a node.

Demo: Programmatic reveal/hide

ivhTreeviewMgr.collapse(tree, node[, opts])

A convenience method, delegates to ivhTreeviewMgr.expand with isExpanded set to false.

ivhTreeviewMgr.collapseRecursive(tree[, node[, opts]])

A convenience method, delegates to ivhTreeviewMgr.expandRecursive with isExpanded set to false,

Demo: Programmatic recursive expand/collapse

ivhTreeviewMgr.collapseParents(tree, node[, opts])

A convenience method, delegates to ivhTreeviewMgr.expandTo with isExpanded set to false.

Demo: Programmatic reveal/hide

ivhTreeviewMgr.validate(tree[, opts][, bias])

Validate a tree data store, bias is a convenient redundancy for opts.defaultSelectedState.

When validating tree data we look for the first node in each branch which has a selected state defined that differs from opts.defaultSelectedState (or bias). Each of that node's children are updated to match the differing node and parent indeterminate states are updated.

Demo: Programmatic select/deselect

Dynamic Changes

Adding and removing tree nodes on the fly is supported. Just keep in mind that added nodes do not automatically inherit selected states (i.e. checkbox states) from their parent nodes. Similarly, adding new child nodes does not cause parent nodes to automatically validate their own selected states. You will typically want to use ivhTreeviewMgr.validate or ivhTreeviewMgr.select after adding new nodes to your tree:

// References to the tree, parent node, and children...
var tree = getTree()
  , parent = getParent()
  , newNodes = [{label: 'Hello'},{label: 'World'}];

// Attach new children to parent node
parent.children = newNodes;

// Force revalidate on tree given parent node's selected status
ivhTreeviewMgr.select(myTree, parent, parent.selected);

Tree Traversal

The internal tree traversal service is exposed as ivhTreeviewBfs (bfs --> breadth first search).

ivhTreeviewBfs(tree[, opts][, cb])

We perform a breadth first traversal of tree applying the function cb to each node as it is reached. cb is passed two parameters, the node itself and an array of parents nodes ordered nearest to farthest. If the cb returns false traversal of that branch is stopped.

Note that even if false is returned each of nodes siblings will still be traversed. Essentially none of nodes children will be added to traversal queue. All other branches in tree will be traversed as normal.

In other words returning false tells ivhTreeviewBfs to go no deeper in the current branch only.

Demo: ivhTreeviewBfs in action

Optimizations and Known Limitations

Performance at Scale

The default node template assumes a reasonable number of tree nodes. As your tree grows (3k-10k+ nodes) you will likely notice a significant dip in performance. This can be mitigated by using a custom template with a few easy tweaks.

Only process visible nodes by adding an ng-if to the ivh-treeview-children element. This small change will result in significant performance boosts for large trees as now only the visible nodes (i.e. nodes with all parents expanded) will be processed. This change will likely be added to the default template in version 1.1.

Use Angular's bind-once syntx in a custom template. The default template supports [email protected] and so does not leverage the native double-colon syntax to make one time bindings. By binding once where possible you can trim a large number of watches from your trees.

Known Issues

  • Creating multiple treeviews within an ngRepeat loops creates an issue where each treeview accesses the same controller instance after initial load. See issue #113.
  • We use Angular's filterFilter for filtering, by default this compares your filter string with at all object attributes. This directive attaches an attribute to your tree nodes to track its selected state (e.g. selected: false). If you want your filter to ignore the selection tracking attribute use an object or function filter. See issue #151.

Reporting Issues and Getting Help

When reporting an issue please take a moment to reproduce your setup by modifying our starter template. Only make as many changes as necessary to demonstrate your issue but do comment your added code.

Please use Stack Overflow for general questions and help with implementation.

Contributing

Please see our consolidated contribution guidelines.

Release History

  • 2015-11-29 v1.0.2 Allow numeric ids as well as string ids
  • 2015-09-23 v1.0.0 Use expressions rather than callbacks for change/toggle handlers, update default template. See MIGRATING doc for breaking changes.
  • 2015-05-06 v0.10.0 Make node templates customizable
  • 2015-02-10 v0.9.0 All options are set-able via attributes or config object
  • 2015-01-02 v0.8.0 Add ability to expand/collapse nodes programmatically
  • 2014-09-21 v0.6.0 Tree accepts nodes added on the fly
  • 2014-09-09 v0.3.0 Complete refactor. Directive no longer propagates changes automatically on programmatic changes, use ivhTreeviewMgr.
  • 2014-08-25 v0.2.0 Allow for initial expansion
  • 2014-06-20 v0.1.0 Initial release

License

MIT license, copyright iVantage Health Analytics, Inc.

angular-ivh-treeview's People

Contributors

18601673727 avatar alexg2195 avatar alexmiddeleer avatar evsheffield avatar fhurta avatar jtrussell avatar lily-pytel avatar mudassir0909 avatar nbergqui avatar schizoduckie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-ivh-treeview's Issues

Add ability to customize node display

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.

Mark as checked

Hello!

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

Thanks in advance.

Load data from APIs using promises

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.

Not able to invoke change-handler

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.

Embedded HTML in tree node

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?

Error: b is undefined

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?

Mark the parent as checked with a filter

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 😞

Question: Filtering and selected items ($scope instead of var)

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.

RFC: v1.0.0 api and feature set

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

Expand/collapse not functioning

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.
capture

click node to select it

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?

An error had been thrown out from jsbin example.

Question: ng-click in custom template doesnt fire

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?

Make node templates customizable

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.

Filtering with object mask should consider child nodes

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.

Display a different leaf for items with no children

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.

Allow for programmatic expand/collapse

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.

Controller Scope in Click Callback is wrong

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>

Search data from API, and render Filter

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.

Question: bind text inputs to the right of the tree-view

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!

Unexpected behavior with search filter

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! 🍻

IVH treeview - Lazy loading on parent node

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.

Add options to disable toggle on label click and to disable node click on toggle

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.

Allow clickhandler on node to select

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.

Better Site (gh-pages)

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

Propagation of parent > child

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!

Question: How could I get the selected array?

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?

Problem faced when using selected in parent node

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.

Expanded during filter

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

ivh-treeview-expanded-attribute not honored when using ivhTreeviewMgr.expand()

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.

Indeterminate state validation should happen on change

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.

Allow opt-out of child length watchers

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.