Angular-tree-component: Checkboxes and async loading of children

[wendelstam]

Hi,

I am loading a tree with multiple levels with checkboxes (+4000 nodes) and I use async loading.
First I got an error but after monkey patching the method setIsSelected it works.

TreeNode.prototype.setIsSelected = function (value) {
  if (this.isLeaf || !this.children) {
    this.treeModel.setSelectedNode(this, value);
  } else {
    this.treeModel.setSelectedNode(this, value);
    this.children.forEach((child) => child.setIsSelected(value));
  }
  return this;
};

But when I'm trying to check only node paths fully loaded gets selected. Any workaround for this?

UPDATE

Was able to make it work by adding this.

Object.defineProperty(TreeNode.prototype, 'isSelected', {
  get: function () {
    if (this.isLeaf || !this.children) {
      return this.treeModel.isSelected(this);
    } else {
      return some(this.children, function (node) {
        return node.isSelected;
      });
    }
  },
  enumerable: true,
  configurable: true
});

PS:
Great component all and all!

[wendelstam]

When trying to check checkboxes through the API its quite slow, have tried to set selectedLeafNodeIds directly on the state object but cannot get the check state updated/propagated into the tree. Any ideas? Same for expandedNodeIds. What am I missing?

[klteograss]

Yes, using node.setIsSelected() is slow, especially when you have multiple checkbox selected.
Is there any faster way of initialize the checkbox states?

[isaklafleur]

Hi @wendelstam @klteograss!
I also trying to solve it. In the docs selectedLeafNodeIds should be available, but it is not exported. I hope this solves your performance issue.

I just made a pull request as the api does not export selectedLeafNodeIds in the ITreeState interface.

[klteograss]

@isaklafleur thanks, yes. I solved the performance issue by using the selectedLeafNodeIds in the tree model.

[omid-nazifi]

Hi @wendelstam, Could you tell me how you have made monkey patching for setIsSelected method? Where should I replace the method?

[wendelstam]

You should just be able to include it anywhere so it is just executed prior to you using the tree component @omid-nazifi, I think I just included it before my component class (the one using the tree view cmp) when I tested it.
(Have since then moved to using Teleriks Treeview component i.e. a paid alternative). Still really like this project though.

[omid-nazifi]

Sorry, I didn't understand where is it exactly. Did you add it out of your component? How does it call? I mean how does app recognize it instead of original method?
Could you display me by example, If it is possible?

[wendelstam]

@omid-nazifi: I just added it before to the component class definition i.e. like a "module global" const (outside the class) so it is just defined once.
In production i would probably have refactored it so it was in a separate ts/js file loaded individually by ng-cli/webpack. But as long as it's defined after the tree component is loaded I think you should be good. Did not test it a lot since we had other things that required us to use a different tree view component (lack of some for us important features not bugs) for our project.

Object.defineProperty(TreeNode.prototype, 'isSelected', {
  get: function () {
    if (this.isLeaf || !this.children) {
      return this.treeModel.isSelected(this);
    } else {
      return some(this.children, function (node) {
        return node.isSelected;
      });
    }
  },
  enumerable: true,
  configurable: true
});

@Component({...})
export class MyComponent {
....
}

[omid-nazifi]

Thanks you @wendelstam
It was a great note. :+1:

[omid-nazifi]

Hi @isaklafleur @klteograss,
Could you help me how you solved low performance by selectedLeafNodeIds when checkbox is selected?

Thank you

[klteograss]

@omid-nazifi you assign the node id to selectLeafNodeIds

        treeModel.selectedLeafNodeIds = Object.assign({},
          treeModel.selectedLeafNodeIds, { [node.id]: true });

[phhbr]

Did you try to work with the tri-state checkbox aswell?

Cannot get it to work properly, and don't have any clue why it does not work

[adamkleingit]

I hope after I merge your PR it will help - I made a commit for you to
review. Thanks

On Thu, Dec 6, 2018 at 7:37 PM Philipp Huber [e-mail]
wrote:

Did you try to work with the tri-state checkbox aswell?

Cannot get it to work properly, and don't have any clue why it does not
work

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular-tree-component/issues/531#issuecomment-444960864,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSkO7WDfuRRl5oOzcM5QO1MCKjIVmks5u2VXhgaJpZM4Rao2k
.

[adamkleingit]

Published in 8.0.2