ivantage / angular-ivh-treeview Goto Github PK
View Code? Open in Web Editor NEWA treeview for AngularJS with filtering and checkbox support.
Home Page: http://ivantage.github.io/angular-ivh-treeview/
License: MIT License
A treeview for AngularJS with filtering and checkbox support.
Home Page: http://ivantage.github.io/angular-ivh-treeview/
License: MIT License
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.
Anyway the tree can be expanded during filtering to display the actual result(s)? Thanks for this, btw. Great work!
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?
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.
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?
Hello!
Is there a way to mark as checked some checkboxes, as in my DB?
Thanks in advance.
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:
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 π
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.
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/
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.
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.
So folks can more easily skin their tree nodes without a custom template.
See #27
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.
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?
I needed some additional functionality for the treeview:
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.
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?
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.
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! π»
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>
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>
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.
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)
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:
E.g. create a jsbin from the template in the README for...
ivhTreeviewMgr
dot
select
/ deselect
selectAll
/ deselectAll
selectEach
/ deselectEach
expandTo
/ collapseParents
expandRecursive
/ collapseParents
validate
ivh-treeview-node-label
, etc. (#44)gh-pages
branch in progress). (#46)Things to consider making opt-in/opt-out-able:
ivhTreeviewMgr.sanitize
- Sanitize a node, i.e. remove all treeview attributesI 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?
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
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!
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
Getting weary of having to always wrap a root node in an array.
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.
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.
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.
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!
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.
E.g. to:
Is there a way to configure the component so that the parent checkbox can be selected without checking all of the children?
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.
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.
If some nodes are initially selected the view should update parent/child nodes to accommodate.
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.
Need a mechanism to expand/collapse the tree recursively.
Is it possible to use radio button instead of checkbox?
Can I achieve it by using custom template?
See #10
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.