Differences when Expand / Collapse all and Expand / Collapse one by one.

[djlerman]

Thank You. This is a great plugin for jQuery and I hope it keeps getting upgraded & supported.

I found an issue that happens differently if you Expand / Collapse all BRANCHES at the same time or click through to Expand / Collapse all BRANCHES one by one.

• If you Expand / Collapse all BRANCHES at the same time using jQuery('#example-advanced').treetable('expandAll') OR jQuery('#example-advanced').treetable('collapseAll'). It adds the class 'expanded' / 'collapsed' to ALL BRANCHES and LEAFS.
• If you Expand / Collapse all BRANCHES one by one. Class 'expanded' / 'collapsed' is only added the BRANCHES

The end result is it looks exactly the same on the screen but the underlying DOM is different and will return different results for certain jQuery / javascript actions.

Please let me know if there is an internal reason for this. If there is, I will look for another way.

I changed the following code in jquery.treetable.js. It might not be the correct logic or the correct place but it worked for me.

FROM:

  Node.prototype.collapse = function() {
    if (this.collapsed()) {
      return this;
    }

    this.row.removeClass("expanded").addClass("collapsed");

    this._hideChildren();
    this.expander.attr("title", this.settings.stringExpand);

    if (this.initialized && this.settings.onNodeCollapse != null) {
      this.settings.onNodeCollapse.apply(this);
     }

    return this;
  };

TO:

  Node.prototype.collapse = function() {
    if (this.collapsed()) {
      return this;
    }

    if(this.row.hasClass("branch")) {
      this.row.removeClass("expanded").addClass("collapsed");

      this._hideChildren();
      this.expander.attr("title", this.settings.stringExpand);

      if (this.initialized && this.settings.onNodeCollapse != null) {
        this.settings.onNodeCollapse.apply(this);
      }
    }

    return this;
  };

AND

FROM:

Node.prototype.expand = function() {
  if (this.expanded()) {
    return this;
  }

  this.row.removeClass("collapsed").addClass("expanded");

  if (this.initialized && this.settings.onNodeExpand != null) {
     this.settings.onNodeExpand.apply(this);
  }

  if ($(this.row).is(":visible")) {
    this._showChildren();
   }

  this.expander.attr("title", this.settings.stringCollapse);

  return this;
};

TO:

Node.prototype.expand = function() {
  if (this.expanded()) {
    return this;
  }

  if(this.row.hasClass("branch")) {
    this.row.removeClass("collapsed").addClass("expanded");

    if (this.initialized && this.settings.onNodeExpand != null) {
      this.settings.onNodeExpand.apply(this);
    }

    if ($(this.row).is(":visible")) {
      this._showChildren();
    }

    this.expander.attr("title", this.settings.stringCollapse);
  }

  return this;
};

[ludo]

Thanks for reporting this, it's a bug indeed.

[Oguzun]

Great. Thank you @djlerman , this worked for me too.