docs: add Grid and Tree Grid interaction examples - #6185
Draft
totally-not-ai[bot] wants to merge 10 commits into
Draft
totally-not-ai[bot] wants to merge 10 commits into
totally-not-ai[bot] wants to merge 10 commits into
Conversation
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>
Contributor
Preview DeploymentThis PR has been deployed for preview. URL: https://docs-preview-pr-6185.fly.dev Changed pagesAdded content is highlighted in green; removed content is marked in red on each page.
Built from ad63384 |
vursen
reviewed
Sep 28, 2026
… 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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
components/grid/selection.adoc): new "Selecting Rows with Arrow Keys" section (Flow) with a liveGridSelectOnFocusdemo. A cell focus listener selects the focused row, and deselection is turned off.components/tree-grid/index.adoc): new "Selecting Children Recursively" section (Flow) with a liveTreeGridRecursiveSelectiondemo. When the user selects or deselects a parent, all of its descendants from theTreeDataare 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.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 callsrefreshAll()), and return an empty stream.handle-downloads.adoc): new "Exporting Grid Data" section. It exports the selected rows, or all rows when nothing is selected, as CSV through anAnchordownload handler, and escapes values correctly.handle-uploads.adoc): new "Showing Uploaded CSV Data in a Grid" section. It reads an uploaded CSV file into aGrid<String[]>and makes one column per header value.grid-select-on-focus.tsfor 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
com.vaadin.demo.component.treegrid.TreeGridRecursiveSelection
🤖 Generated with Claude Code