LearnNewsExamplesServices
Frontmatter
id9410
titleTreeGrid Documentation & Examples
stateClosed
labels
documentationenhancementgood first issueai
assigneestobiu
createdAtMar 9, 2026, 12:01 PM
updatedAtMar 9, 2026, 8:48 PM
githubUrlhttps://github.com/neomjs/neo/issues/9410
authortobiu
commentsCount1
parentIssue9404
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtMar 9, 2026, 8:48 PM

TreeGrid Documentation & Examples

Closed v12.1.0 documentationenhancementgood first issueai
tobiu
tobiu commented on Mar 9, 2026, 12:01 PM

Goal

Create comprehensive documentation and interactive examples demonstrating the new Tree Grid capabilities.

Details

  1. Examples Directory:
    • Create a new example in examples/grid/treeGrid/.
    • Provide a toggle to switch between singleExpand and multiExpand modes.
    • Demonstrate custom cell renderers alongside the tree column.
  2. Dataset:
    • Utilize an existing hierarchical dataset (like learn/tree.json or a mocked file system).
  3. Learning Guides:
    • Update learn/guides/datahandling/Grids.md (or create a specific TreeGrid guide).
    • Explain the TreeStore concept, the "flattened view" architecture, and how to configure column.Tree.
tobiu added the documentation label on Mar 9, 2026, 12:01 PM
tobiu added the enhancement label on Mar 9, 2026, 12:01 PM
tobiu added the good first issue label on Mar 9, 2026, 12:01 PM
tobiu added the ai label on Mar 9, 2026, 12:01 PM
tobiu added parent issue #9404 on Mar 9, 2026, 12:01 PM
tobiu assigned to @tobiu on Mar 9, 2026, 12:02 PM
tobiu referenced in commit 524bb31 - "fix(grid): Correct themes, fix baseCls layout, and add TreeGrid demo (#9407) (#9410) on Mar 9, 2026, 8:48 PM
tobiu
tobiu Mar 9, 2026, 8:48 PM

Input from Gemini 3.1 Pro:

✦ I have committed the first working TreeGrid example!

This static "File Explorer" style demo validates several core architectural pieces:

  • The Neo.data.TreeStore successfully parses nested JSON data and projects the initial flattened view.
  • The new Neo.grid.column.Tree correctly renders the cell components.
  • The baseCls: ['neo-grid-tree-cell'] fix ensures the App Worker injects the proper layout styles (fixing the zero-height divs).
  • The examples/grid/tree/MainModel.mjs prevents the RecordFactory from stripping custom fields during hydration.
  • The isTreeGrid flag ensures the correct ARIA attributes are generated for accessibility.

Important Note regarding the DOM: You will notice the Tree cell renders outside the standard <div id="...__cell-0"> pool in the DOM. This is entirely by design. The Tree cell component extends Neo.grid.column.Component, meaning it operates as a "Permanent Cell" (hideMode: 'display'). This protects the Component instance's lifecycle during horizontal scrolling, while visual order is maintained correctly via absolute CSS positioning (left: Xpx).

Closing this issue as the foundational example is now complete and functional.

tobiu closed this issue on Mar 9, 2026, 8:48 PM
tobiu referenced in commit 110b638 - "fix(examples): Flatten TreeGrid mock data to match TreeStore ingest format (#9410)" on Mar 9, 2026, 9:32 PM