Collapse nodes not once scrolled into view not working

Post by **jnhg** » Tue May 12, 2026 9:11 pm

Hi,

I'm having trouble with collapsing nodes in a tree grid that have not been in my viewport.

I've added this button to the tbar in the https://bryntum.com/products/grid/examples/tree/ example that's intended to expand the whole grid but collapse all nodes with leaves.

{
    type     : 'button',
    ref      : 'expandToLeaves',
    icon     : 'fa fa-angle-double-up',
    text     : 'Expand to leaves',
    onAction : async () => {
        const toCollapse = [];
        await tree.expandAll();
        tree.store.traverse(record => {
            if (!record.isLeaf && record.children?.some(child => child.isLeaf)) {
                toCollapse.push(record);
            }
        });
        for (const record of toCollapse) {
            await tree.collapse(record);
        }
    }
},

When I open the example my viewport is such that I only see the top 8 rows (out of 27).
What happens is that if i press the expandToLeaves-button without first scrolling down in the grid then the lowest leaf parent is not collapsed. If I try again but first scroll down to the bottom then the button works as expected.

Post by **ahmadzaheer** » Tue May 12, 2026 9:36 pm

Hello,

I have tried to reproduce this in the example but I haven't been able to. Can you please let me know if I am missing anything here (Have attached the video for reproduction steps)? Moreover, let us know the browser and OS you are facing this issue on.

Post by **jnhg** » Wed May 13, 2026 8:07 am

Hi,
It somehow did not work when I tried to reproduce it just now, but when I added another group (Gates 11 - 15) a similar error appeared. I made a recording and attached it.

OS: Windows 11
Browser: Chrome

        data: [
          {
            "id"       : 1,
            "name"     : "Kastrup Airport",
            "expanded" : true,
            "children" : [
              {
                "id"        : 2,
                "name"      : "Terminal A",
                "type"      : "terminal",
                "lounges"   : ["Aspire Lounge", "United Airlines United Club"],
                "rowHeight" : 80,
                "expanded"  : true,
                "children"  : [
                  {
                    "id"       : 3,
                    "name"     : "Gates 1 - 5",
                    "expanded" : true,
                    "children" : [
                      {
                        "id"       : 4,
                        "name"     : "Gate 1",
                        "capacity" : 100,
                        "airline"  : "SAS",
                        "manager"  : "Linda"
                      },
                      {
                        "id"       : 5,
                        "name"     : "Gate 2",
                        "capacity" : 45,
                        "domestic" : "yes",
                        "airline"  : "Lufthansa",
                        "manager"  : "Steve"
                      },
                      {
                        "id"       : 6,
                        "name"     : "Gate 3",
                        "capacity" : 45,
                        "airline"  : "SAS",
                        "manager"  : "Steve"
                      },
                      {
                        "id"       : 7,
                        "name"     : "Gate 4",
                        "capacity" : 65,
                        "airline"  : "Norwegian",
                        "manager"  : "Linda"
                      },
                      {
                        "id"       : 8,
                        "name"     : "Gate 5",
                        "capacity" : 75,
                        "domestic" : "yes",
                        "airline"  : "Air France",
                        "manager"  : "Steve"
                      }
                    ]
                  },
                  {
                    "id"       : 9,
                    "name"     : "Gates 6 - 10",
                    "expanded" : true,
                    "children" : [
                      {
                        "id"       : 10,
                        "name"     : "Gate 6",
                        "capacity" : 77,
                        "airline"  : "SAS",
                        "manager"  : "Steve"
                      },
                      {
                        "id"       : 11,
                        "name"     : "Gate 7",
                        "capacity" : 85,
                        "airline"  : "Norwegian",
                        "manager"  : "Linda"
                      },
                      {
                        "id"       : 12,
                        "name"     : "Gate 8",
                        "capacity" : 95,
                        "domestic" : "yes",
                        "airline"  : "Lufthansa",
                        "manager"  : "Linda"
                      },
                      {
                        "id"       : 13,
                        "name"     : "Gate 9",
                        "capacity" : 55,
                        "domestic" : "yes",
                        "airline"  : "Lufthansa",
                        "manager"  : "Daniel"
                      },
                      {
                        "id"       : 14,
                        "name"     : "Gate 10",
                        "capacity" : 15,
                        "domestic" : "yes",
                        "airline"  : "Air France",
                        "manager"  : "Steve"
                      }
                    ]
                  }
                ]
              },
              {
                "id"        : 15,
                "name"      : "Terminal B - Domestic",
                "type"      : "terminal",
                "lounges"   : ["Star Alliance"],
                "rowHeight" : 80,
                "expanded"  : true,
                "children"  : [
                  {
                    "id"       : 16,
                    "name"     : "Gates 1 - 5",
                    "children" : [
                      {
                        "id"       : 17,
                        "name"     : "Gate 1",
                        "capacity" : 15,
                        "domestic" : "yes",
                        "airline"  : "Lufthansa",
                        "manager"  : "Daniel"
                      },
                      {
                        "id"       : 18,
                        "name"     : "Gate 2",
                        "capacity" : 45,
                        "domestic" : "yes",
                        "airline"  : "Air China",
                        "manager"  : "Daniel"
                      },
                      {
                        "id"       : 19,
                        "name"     : "Gate 3",
                        "capacity" : 45,
                        "domestic" : "yes",
                        "airline"  : "SAS",
                        "manager"  : "Steve"
                      },
                      {
                        "id"       : 20,
                        "name"     : "Gate 4",
                        "capacity" : 65,
                        "domestic" : "yes",
                        "airline"  : "SAS",
                        "manager"  : "Steve"
                      },
                      {
                        "id"       : 21,
                        "name"     : "Gate 5",
                        "capacity" : 70,
                        "domestic" : "yes",
                        "airline"  : "Lufthansa",
                        "manager"  : "Steve"
                      }
                    ]
                  },
                  {
                    "id"       : 22,
                    "name"     : "Gates 6 - 10",
                    "expanded" : true,
                    "children" : [
                      {
                        "id"       : 23,
                        "name"     : "Gate 6",
                        "capacity" : 80,
                        "domestic" : "yes",
                        "airline"  : "SAS",
                        "manager"  : "Daniel"
                      },
                      {
                        "id"       : 24,
                        "name"     : "Gate 7",
                        "capacity" : 120,
                        "domestic" : "yes",
                        "airline"  : "Norwegian",
                        "manager"  : "Daniel"
                      },
                      {
                        "id"       : 25,
                        "name"     : "Gate 8",
                        "capacity" : 125,
                        "domestic" : "yes",
                        "airline"  : "Lufthansa",
                        "manager"  : "Linda"
                      },
                      {
                        "id"       : 26,
                        "name"     : "Gate 9",
                        "capacity" : 100,
                        "domestic" : "yes",
                        "airline"  : "SAS",
                        "manager"  : "Linda"
                      },
                      {
                        "id"       : 27,
                        "name"     : "Gate 10",
                        "capacity" : 100,
                        "domestic" : "yes",
                        "airline"  : "Lufthansa",
                        "manager"  : "Linda"
                      }
                    ]
                  },
                  {
                    "id"       : 28,
                    "name"     : "Gates 11 - 15",
                    "expanded" : true,
                    "children" : [
                      {
                        "id"       : 30,
                        "name"     : "Gate 11",
                        "capacity" : 80,
                        "domestic" : "yes",
                        "airline"  : "SAS",
                        "manager"  : "Daniel"
                      },
                      {
                        "id"       : 31,
                        "name"     : "Gate 12",
                        "capacity" : 120,
                        "domestic" : "yes",
                        "airline"  : "Norwegian",
                        "manager"  : "Daniel"
                      },
                      {
                        "id"       : 32,
                        "name"     : "Gate 13",
                        "capacity" : 125,
                        "domestic" : "yes",
                        "airline"  : "Lufthansa",
                        "manager"  : "Linda"
                      },
                      {
                        "id"       : 33,
                        "name"     : "Gate 14",
                        "capacity" : 100,
                        "domestic" : "yes",
                        "airline"  : "SAS",
                        "manager"  : "Linda"
                      },
                      {
                        "id"       : 34,
                        "name"     : "Gate 15",
                        "capacity" : 100,
                        "domestic" : "yes",
                        "airline"  : "Lufthansa",
                        "manager"  : "Linda"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ],

bryntum_35357_0.mp4: Issue with collapse; (8.33 MiB) Downloaded 218 times

Post by **tasnim** » Wed May 13, 2026 8:37 am

Thanks for your detailed report. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/13164

Post by **tasnim** » Thu May 14, 2026 5:28 pm

For now, you can use this as a workaround

        {
            type     : 'button',
            ref      : 'expandToLeaves',
            icon     : 'fa fa-angle-double-up',
            text     : 'Expand to leaves',
            onAction : async () => {
                const
                    { store }  = tree,
                    toCollapse = [];

            await tree.expandAll();

            store.traverse(record => {
                if (!record.isLeaf && record.children?.some(child => child.isLeaf)) {
                    toCollapse.push(record);
                }
            });

            // Batch all collapses under a single store event suspension so the row manager
            // receives one full refresh instead of sequential per-node remove events. The
            // individual events cause virtual-row recycling to assign DOM rows to wrong
            // records for nodes that are outside the current viewport.
            store.suspendEvents();

            for (const record of toCollapse) {
                store.toggleCollapse(record, true);
            }

            store.resumeEvents();

            tree.refreshRows();
        }
    },