Is there a reliable way to scroll jqxTreeGrid to a specific node ID after search

[pedro_barbosaParticipant]

Hi everyone, I am working on a small reporting tool for operations with TreeGrid.

I am currently trying to solve this: Is there a reliable way to scroll jqxTreeGrid to a specific node ID after search and auto-expand its ancestors?

So far, I already checked the docs and basic examples, but the component updates only after a manual refresh.

What would be the cleanest way to implement this?

[adminKeymaster]

Hi,

With jqxTreeGrid, the most reliable pattern is usually:

Find the target record by ID.
Walk up the parent chain and expand all ancestors.
Wait until the TreeGrid has finished processing the expansion.
Select the row and scroll it into view.

The issue you’re seeing is often caused by trying to scroll immediately after calling expandRow(), before the DOM has been updated.

A typical implementation looks like this:

scrollToNode(nodeId: number) {
    const row = this.treeGrid.getRow(nodeId);

    if (!row) {
        return;
    }

    // Expand ancestors
    let parent = row.parent;

    while (parent) {
        this.treeGrid.expandRow(parent.uid);
        parent = parent.parent;
    }

    // Wait for TreeGrid rendering
    setTimeout(() => {
        this.treeGrid.selectRow(row.uid);
        this.treeGrid.ensureRowVisible(row.uid);
    }, 0);
}

If ensureRowVisible() is not enough

For larger datasets or virtual rendering, you may need to wait for the expansion lifecycle event:

this.treeGrid.expandRow(parentId);

this.treeGrid.onRowExpand.subscribe(() => {
    this.treeGrid.ensureRowVisible(targetId);
});

or:

requestAnimationFrame(() => {
    this.treeGrid.ensureRowVisible(targetId);
});

Angular-specific consideration

If your search result updates component state before expanding the tree, Angular change detection can delay the TreeGrid refresh.

In that case:

this.cdr.detectChanges();

setTimeout(() => {
    this.treeGrid.ensureRowVisible(targetId);
});

often works better than calling the scroll method immediately.

Recommended approach

For a search feature, I would implement a helper that:

findNode(id)
  -> expandParents(id)
  -> selectRow(id)
  -> ensureRowVisible(id)

and perform the final two actions only after the last ancestor expansion has completed. This avoids the “works only after manual refresh” behavior that commonly occurs when the grid has not yet recalculated row positions.

If you can share which jqxTreeGrid version you’re using and whether you’re using virtual mode (virtualModeCreateRecords), I can provide a more version-specific solution, since scrolling behavior differs slightly between standard and virtualized TreeGrids.

Regards,
Peter

[Author]

Posts