iVantage / angular-ivh-treeview

A treeview for AngularJS with filtering and checkbox support.
http://ivantage.github.io/angular-ivh-treeview/
MIT License
239 stars 89 forks source link

Question: is it possible to change the logic related to check-box selection propagation #111

Closed kasajian closed 8 years ago

kasajian commented 8 years ago

I want the exact behavior as there is today, except that i don't want the state of the parent check-box to change when a child or descendant check-box is clicked.

That is,

  1. currently: when one clicks on a parent checkbox, its selection is propagated to all descendant nodes. I want to keep that behavior.
  2. currently, when one clicks on a checkbox, the ancestor node(s) are turned into indeterminate or unselected. they are unselected if there are no descendant nodes left that are selected.

I want to disable the behavior associated with 2.

kasajian commented 8 years ago

Based on https://github.com/iVantage/angular-ivh-treeview/issues/22

I used this template which mostly worked:

// 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" />'
  };
});

This works, unfortunately, I wasn't able to determine how to get notification when the node changed. In one application, I need to propagate changes to the child and parent nodes in a way that's different than how this component is implemented by default.

For anyone who needs to do something similar, in order get notification of changes, you need to update the above template as follows:

  1. First of all, node: '=ivhTreeviewCheckbox' is not really doing anything useful. If you add a link property to the directive, you won't get anything in the 'node' property of the scope that's passed in. So I changed the value of scope to false, and added a link field that calls onCbChange
app.directive('ivhTreeviewCheckbox', function() {
  return {
    scope: false,
    template: '<input type="checkbox" ng-model="node.selected" />',
    link: function(scope, element, attrs) {
      element.on('click', function(event) {
        scope.trvw.onCbChange(scope.node, scope.node.selected);
      });
    }
  };
});

Now you can add a onCbChange property as documented. See Select/Deselect Handlers @ in the README.md.

Here's a code-pen that demonstrates it: http://codepen.io/kasajian/pen/grOyNe?editors=1011