Skip to content

docs: add Grid and Tree Grid interaction examples - #6185

Draft
totally-not-ai[bot] wants to merge 10 commits into
mainfrom
docs/grid-interaction-tree-grid-examples
Draft

totally-not-ai[bot] wants to merge 10 commits into
mainfrom
docs/grid-interaction-tree-grid-examples

Conversation

@totally-not-ai

@totally-not-ai totally-not-ai Bot commented Sep 26, 2026 •

Copy link
Copy Markdown
Contributor

Summary

This PR adds documentation examples for common Grid and Tree Grid tasks: selecting rows with the arrow keys, selecting a Tree Grid parent together with all its children, handling data loading errors, exporting Grid data as CSV, and showing an uploaded CSV file in a Grid.

What changed

Docs only. Nothing changes in any library.

  • Grid selection (components/grid/selection.adoc): new "Selecting Rows with Arrow Keys" section (Flow) with a live GridSelectOnFocus demo. A cell focus listener selects the focused row, and deselection is turned off.
  • Tree Grid (components/tree-grid/index.adoc): new "Selecting Children Recursively" section (Flow) with a live TreeGridRecursiveSelection demo. When the user selects or deselects a parent, all of its descendants from the TreeData are updated too. The listener skips changes that did not come from the client, so it does not react to its own updates. The text also explains how to do this with a custom data provider (fetchChildren) and warns that it can be slow.
  • Paginated Grid (add-grid/paginated-data.adoc): new "Handling Errors" section. It shows how to catch service errors in the fetch callback, show a notification with a Retry button (which calls refreshAll()), and return an empty stream.
  • Downloads (handle-downloads.adoc): new "Exporting Grid Data" section. It exports the selected rows, or all rows when nothing is selected, as CSV through an Anchor download handler, and escapes values correctly.
  • Uploads (handle-uploads.adoc): new "Showing Uploaded CSV Data in a Grid" section. It reads an uploaded CSV file into a Grid<String[]> and makes one column per header value.
  • New frontend import file grid-select-on-focus.ts for the Java-only demo.

The Tree Grid filter expansion example has moved to #6197.

API Changes

2 new demo view classes (docs examples only, not library API).

com.vaadin.demo.component.grid.GridSelectOnFocus

// Added
@Route("grid-select-on-focus") public class GridSelectOnFocus extends Div
public GridSelectOnFocus()
public static class Exporter extends DemoExporter<GridSelectOnFocus>

com.vaadin.demo.component.treegrid.TreeGridRecursiveSelection

// Added
@Route("tree-grid-recursive-selection") public class TreeGridRecursiveSelection extends Div
public TreeGridRecursiveSelection()
public static class Exporter extends DemoExporter<TreeGridRecursiveSelection>

🤖 Generated with Claude Code

totally-not-ai Bot and others added 2 commits September 26, 2026 09:23
Add examples for selecting Grid rows with arrow keys, selecting Tree
Grid children recursively, expanding filtered Tree Grid items, handling
data loading errors in a paginated Grid, exporting Grid data as CSV,
and showing uploaded CSV data in a Grid.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Sep 26, 2026 •

Copy link
Copy Markdown
Contributor

Preview Deployment

This PR has been deployed for preview.

URL: https://docs-preview-pr-6185.fly.dev

Changed pages

Added content is highlighted in green; removed content is marked in red on each page.

Built from ad63384

Comment thread articles/components/tree-grid/data-binding.adoc Outdated
totally-not-ai Bot and others added 7 commits September 28, 2026 07:18
… Grid

expandRecursively on the root items expands the whole tree, not only
the paths to the matches.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…arch

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… example

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
It's now proposed in #6197.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
vursen added a commit that referenced this pull request Sep 28, 2026
Setting a filter on a `TreeDataProvider` keeps the whole path from the
root to each matching item, but collapsed ancestors stay collapsed, so
matches deeper in the tree aren't visible.

This adds a short example to the **Filtering Items** section of
`components/tree-grid/data-binding.adoc`. The example expands the
filtered tree with `expandRecursively`, fetching the root items from the
data provider so that filtered-out roots are excluded, and explains the
`HierarchicalQuery` arguments. A note says that items expanded this way
stay expanded when the filter changes.

This change was split out of #6185.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: totally-not-ai[bot] <290682512+totally-not-ai[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant