tree expand and collapse

[jbomer]

Sometime parent container don't resize on tree expant or collapse (with OnDemandGrid). This modification in Tree.expand() it seem perform properly:

if (hasTransitionend && !noTransition) {
//on.once(container, hasTransitionend, this._onTreeTransitionEnd);
on(container, hasTransitionend, this._onTreeTransitionEnd);
}

[zub2]

I have just been bitten by the same issue. It's occurring in dgrid v0.4.0 but also in master (as of a3577b6).

For the issue to manifest, there needs to be a node that has at least two levels of children. The behavior is as if the height of the expanded node (including its children) was determined once and upon subsequent folds/unfolds, the height stays fixed. This behavior breaks rendering when a child node is expanded/collapsed. This would explain the fix jbomer is proposing above. I can confirm that his fix works for me.

It can be reproduced using dgrid/test/Tree.html, in the first grid ("Lazy-loading tree grid, with store functionality") like this:

1. expand "Africa"
2. expand "Egypt"
3. collapse "Africa"
4. expand "Africa"
5. collapse "Egypt"
   -> at this moment a gap between "Sudan" and "Asia" occurs; I'd expect "Asia" to move so that there is no gap

Similarly (after reloading):

1. expand "Africa"
2. collapse "Africa"
3. expand "Africa"
4. expand "Egypt"
   -> at this moment "Sudan" disappears; I'd expect "Asia" to move one row down so that "Sudan" stays visible.

This is in fact reproducible with all the test grids in test/Tree.html where there are at least 2 levels of children.

I tested this using Google Chrome 43.0.2357.134 (64-bit).

[bogool]

This fix works fine when tree (or node) is initially collapsed by default.
I have the tree based on memory store, that is fully expanded:

shouldExpand: function(row, level, previouslyExpanded){
    return true;
}

In this case the fix doesn't work. So I improved it a little, and now it works for me.
Improved version of this fix may look like this:

//dgrid/Tree.js
//line 144
    if (hasTransitionend && !noTransition) {
        //on.once(container, hasTransitionend, this._onTreeTransitionEnd);
        on(container, hasTransitionend, this._onTreeTransitionEnd);
    }
    else {
        this._onTreeTransitionEnd.call(container);
        //fix for node expanded by default:
        if (hasTransitionend){
            on(container, hasTransitionend, this._onTreeTransitionEnd);
        }
    }