Comments (28)
There isn't a supported way of doing this at the moment. Mind if I ask what your use is case for wanting this behavior?
from angular-ivh-treeview.
We want to classify an item without adding it automatically to their children.
Let's say you have a user and some roles:
Role A
- Role 1
- Role 2
- Role 3
We currently cannot select Role 2 without Role A automatically getting selected, and we can not select Role A without all 3 being selected.
We can use the __ivhTreeviewIndeterminate but then we have to recursively walk through the tree, which we want to avoid.
from angular-ivh-treeview.
I see, thanks for the example.
If you're always interested in collecting the top most fully selected items you can use the ivhTreeviewBfs service to good effect:
var selectedNodes = [];
ivhTreeviewBfs(myTreeOrBranch, function(node) {
if(node.selected) {
selectedNodes.push(node);
return false;
}
});
// `selectedNodes` now holds the top most selected nodes in `myTree`
Like you say It might not always be desirable to traverse the tree every time you need these nodes. There isn't anything in this component currently that lets you alter that behavior but ivhTreeview
is pretty modular and you could always go over the top and override the sub-directive that manages treeview checkboxes:
// Remove the built in ivhTreeviewCheckbox directive
myApp.config(function($provide) {
$provide.decorator('ivhTreeviewCheckboxDirective', function($delegate) {
$delegate.shift();
return $delegate;
});
});
// Supply your own checkbox directive that does nothing other than bind to the selected state of the node
myApp.directive('ivhTreeviewCheckbox', function() {
return {
scope: {
node: '=ivhTreeviewCheckbox'
},
template: '<input type="checkbox" ng-model="node.selected" />'
};
});
That's a pretty rough example but should work.
from angular-ivh-treeview.
I'm closing this for now, but feel free to reopen if it you feel like it needs more discussion.
Right now the parent+child checkbox interaction is pretty much much in line with how I imagine hierarchical selections should work. I'd recommend defining your own ivhTreeviewCheckbox
sub-directive or submitting a PR if you're feeling motivated.
from angular-ivh-treeview.
Thanks, it worked!
For future reference, if people want the same behaviour, don't forget to set validate=false, as otherwise all children will be recursively selected on load if a parent is selected
from angular-ivh-treeview.
hi Justin---so we want to keep the behavior described here (selecting a parent selects the children), but we noticed when we select a child node, it automatically selects the chain of all the parent nodes till it gets to the root. This is bad when we are deleting a child node, because it deletes the parents as well...any way around this, or do we have to over ride behavior over decorator again?
Thanks again! :-)
from angular-ivh-treeview.
That's right, the selection model works both ways: selecting a parent selects all its children; selecting all children forces the parent to be selected (just note that until all children are selected the parent should not be marked as selected).
I think in your case I would think about using the change-handler
attribute. This will just be run for the actual node clicked on by the user.
from angular-ivh-treeview.
Yea, so I'm already using the change-handler (very nice feature), however we are adding in classes to do xyz on selection, but its a problem b/c all the parents also get auto selected, and we only want to perform the action (delete for instance) on the node selected by the user.
from angular-ivh-treeview.
I see. Perhaps you can trigger those actions with on-change
? If not I'm afraid you will need to use $provide.decorator
once again.
Yet another use case that will be satisfied when #25 drops.
from angular-ivh-treeview.
Indeed---ok so we'll add it to the decorator. And FYI I have discovered an AWESOME hack for accessing node on the DOM and showing custom conditional buttons (edit, detele, lock) with each node, and getting them to dynamically change, and link in with our controller. We have modified all the twistie templates with full spans and divs adding each side of the tree--and we are able access node there to do what we want....
from angular-ivh-treeview.
@jtrussell I tried to override ivhTreeviewCheckbox directive way above, but I got this error message:
Expression '' used with directive ivhTreeviewCheckbox is non-assignable
So I removed the scope property, and it works. Here is the code:
// Remove the built in ivhTreeviewCheckbox directive
myApp.config(function($provide) {
$provide.decorator('ivhTreeviewCheckboxDirective', function($delegate) {
$delegate.shift();
return $delegate;
});
});
// Supply your own checkbox directive that does nothing other than bind to the selected state of the node
myApp.directive('ivhTreeviewCheckbox', function() {
return {
restrict: 'AE',
template: '<input type="checkbox" ng-model="node.selected" />'
};
});
I looked at the ivhTreeview source code and found that it also use restrict and require properties for ivhTreeviewCheckbox (But I didn't use the require property). Is it okay to override it this way?
from angular-ivh-treeview.
Looks like the code above will remove the ivh-treeview-change-handler feature.
So instead of overriding ivhTreeviewCheckbox directive, I tried to override ivhTreeviewCheckboxDirective and remove this code:
// Update the checkbox when the node's indeterminate status changes
scope.$watch(function() {
return node[indeterminateAttr];
}, function(newVal, oldVal) {
element.find('input').prop('indeterminate', newVal);
});
@jtrussell What do you think?
from angular-ivh-treeview.
@kiddo13 What are you trying to ultimately accomplish?
from angular-ivh-treeview.
I use the treeview as input control for product categories tree. When the user choose a category, the attribute will show the relevant options only, that's why I need the change handler.
So in my implementation, each time user checked or unchecked a category, it'll push the category id to selectedCategories variable, or remove it from the variable.
I know that we could get the selected categories using the available bfs function, but it would be very slow to run each time the selection change.
And for the validation, I checked the length of the selectedCategories array manually, because I couldn't find any way to use angular validation witb the treeview.
What do you think? @jtrussel
I don't know wether I used it the right way.
from angular-ivh-treeview.
Is there a better way to do this?
Is there an option like prevent propagation?
This because I would like to change some treeviews and others not.
from angular-ivh-treeview.
Yes, you can use a custom node template for just the trees which you want to behave differently. Just swap out the checkboxes in those templates for you own.
from angular-ivh-treeview.
One of the demos on the project home page uses custom checkboxes if you're curious: http://ivantage.github.io/angular-ivh-treeview/#demo-custom-templates
There's more info on writing custom templates and skins here: https://github.com/iVantage/angular-ivh-treeview/blob/master/docs/templates-and-skins.md
from angular-ivh-treeview.
Please add independent check API, it's really usefull for add some property to the category in the tree. For example it's needed for add filters to the category of internet market.
Overriding the directive isn't good way, because it rewrite a part of code that may changed in the future.
from angular-ivh-treeview.
Thanks, @druxax. We actually feel pretty good about the current feature set supporting custom checkbox behavior. Is there something specific you're trying to do that using a template doesn't enable?
from angular-ivh-treeview.
Hello. May be your template system let do custom checkbox behaviour, but
it's not in box solution and when you write a ton of code it's difficult
sort out API of all librarys. If you will add this behaviour in box I and
all other will say thanks to you.
2016-02-02 1:05 GMT+03:00 Justin Russell [email protected]:
Thanks, @druxax https://github.com/druxax. We actually feel pretty good
about the current feature set supporting custom checkbox behavior. Is there
something specific you're trying to do that using a template doesn't enable?—
Reply to this email directly or view it on GitHub
#22 (comment)
.
from angular-ivh-treeview.
Please see #111 on how to add change-notification to the template that you override.
from angular-ivh-treeview.
Hi Rusell,
I am using the IVHTREEVIEW in one of our application. Our treeview is something like below,
+ click + to see all items in list
Item1
Item1.1
Item2
Item2.2
We display the checkbox for each item. For the enduser a checkbox for the first node 'Click + to see all Items in list' doesn't make sense in our business. I need to disable or hide the CHECKBOX only for that node( 'Click + to see all Items in list'). How can I do this.
I tried to use 'useCheckboxes' and set it to false, in the below function of ivh-treeview.js. But it is not working.
Can you tell me how we can achieve this.
trvw.label = function(node) {
if(node[localOpts.labelAttribute] == "Click + to see all Items in list"){
node[localOpts.useCheckboxes] = false;
}
return node[localOpts.labelAttribute];
};
from angular-ivh-treeview.
Hi @gopikrishnahm - would you mind posting your question on Stack Overflow? It's a good question but and we find that Stack Overflow makes for a better spot for these sorts of questions so that folks with the same problem can find it in the future. You can attach me to the question on SO (jtrussell) - thanks!
from angular-ivh-treeview.
Sure
from angular-ivh-treeview.
Fixed by PR #125
from angular-ivh-treeview.
This is a good example, but is there a way to add filtering for the same?
http://jsbin.com/detamilumi/edit?html,js,output
from angular-ivh-treeview.
@srk289 Are you unable to filter as normal?
If you're having issues filtering with custom templates please do open a separate issue.
from angular-ivh-treeview.
@jtrussell I couldn't get the filtering to work with this example http://jsbin.com/detamilumi/edit?html,js,output
however, using the #125 options, filter works as expected. Thanks for your help
from angular-ivh-treeview.
Related Issues (20)
- ivh-treeview-children-attribute does not override default config HOT 5
- Remote data bindig HOT 3
- Binding children on promise resolve does not update UI HOT 2
- Disable collapse / expand HOT 1
- When using the checkbox, ivh-treeview-on-item-selected has no effect HOT 2
- How to set the selection can only be changed by clicking on the checkbox HOT 3
- How to change root node dynamically HOT 4
- Does not support tristate properly HOT 5
- On the selection status of the parent node HOT 2
- All subNodes been checked when parentNode been checked HOT 1
- JSbin demos HOT 3
- can we ban the root checkbox? HOT 1
- Disable Twisties & Deselect all children of a parent! HOT 1
- Get Selected Nodes Paths HOT 1
- Performance Improvement - Pop vs Shift HOT 1
- Nothing is being selected.. HOT 1
- select and deselect all method doesn't work on customized children HOT 1
- List Items from Server and apply CSS to specific parents HOT 1
- when data is changed,How to make the check boxes of all nodes unchecked, just like the initial load HOT 1
- how to click on one item, close the other items HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-ivh-treeview.