Propagation of parent > child about angular-ivh-treeview HOT 28 CLOSED

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?

• https://github.com/iVantage/angular-ivh-treeview#filtering
• http://jsbin.com/zitiri/edit?html,output

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.