devexpress-blazor-treelist

Name: devexpress-blazor-treelist
Author: DevExpress

35stars6forks

How to install devexpress-blazor-treelist?

devexpress/agent-skills/devexpress-blazor-treelist

$npx -y skills add DevExpress/agent-skills --skill devexpress-blazor-treelist

Installs into the current project.

Summary

--- name: devexpress-blazor-treelist description: Build and configure the DevExpress Blazor TreeList (DxTreeList) — a hierarchical data grid / tree grid for Blazor Server, WebAssembly, and Hybrid apps. Use when displaying tree-structured or parent-child data; binding flat data

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor TreeList
2
3	`DxTreeList` is a hierarchical data grid for Blazor. It displays data as a tree with expandable/collapsible rows based on parent-child key relationships. It shares most of DxGrid's feature set — sorting, filtering, CRUD editing, export, selection — and adds tree-specific capabilities such as multi-level expand/collapse, load-on-demand child nodes, and tree filtering modes.
4
5	## When to Use This Skill
6
7	- Display hierarchical data (organizational charts, product categories, file systems, bill of materials)
8	- Bind flat data with parent-child ID relationships (`KeyFieldName` + `ParentKeyFieldName`)
9	- Sort, filter, or page tree nodes
10	- Implement CRUD for hierarchical data (create, edit, delete nodes)
11	- Export tree data to CSV, XLS/XLSX, or PDF
12	- Load child nodes on demand from a remote API
13	- Select single or multiple tree nodes with checkboxes
14	- Reorder tree nodes within the TreeList or move rows between TreeLists and Grids with drag-and-drop
15	- Change node hierarchy (re-parent nodes) via drag-and-drop
16
17	## Prerequisites & Installation
18
19	### NuGet Package
20
21	\| Package \| Purpose \|
22	\|---\|---\|
23	\| `DevExpress.Blazor` \| TreeList + all standard Blazor UI components \|
24
25	```bash
26	# Install from NuGet.org:
27	dotnet add package DevExpress.Blazor
28	```
29
30	### Setup (existing project)
31
32	1. Register DevExpress resources in `Program.cs`:
33	```csharp
34	builder.Services.AddDevExpressBlazor();
35	```
36	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
37	2. Apply a theme and add client scripts in `App.razor` inside `<head>`:
38	```razor
39	@using DevExpress.Blazor
40	@DxResourceManager.RegisterTheme(Themes.Fluent)
41	@DxResourceManager.RegisterScripts()
42	```
43	3. Add the namespace to `_Imports.razor`:
44	```razor
45	@using DevExpress.Blazor
46	```
47
48	## Before You Start — Ask the Developer
49
50	If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code.
51
52	Before generating code, ask:
53
54	1. Render mode: Are you using `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`? (TreeList requires an interactive render mode for tree expansion, filtering, and editing.)
55	2. Data structure: Is your data a flat list with parent ID references, or is it already a nested object graph?
56	3. Key fields: What are the primary key field and the parent key field names? What is the root value (the parent ID of root nodes — `null`, `0`, or something else)?
57	4. Features needed: Do you need editing? Export? Selection? Load-on-demand children?
58	5. New or existing project?: Are you adding the TreeList to an existing project or starting fresh?
59
60	## Component Overview
61
62	`DxTreeList` provides:
63
64	- Data Binding (`Data`, `KeyFieldName`, `ParentKeyFieldName`): Binds flat data with parent-child relationships; `RootValue` defines root nodes
65	- Column Types (`DxTreeListDataColumn`, `DxTreeListCommandColumn`, `DxTreeListSelectionColumn`, `DxTreeListBandColumn`): Same column model as DxGrid
66	- Tree Navigation (`AllowExpandCollapse`, `ExpandedRowKeys`): Expand/collapse tree levels, expand all, collapse all
67	- Data Shaping (`AllowSort`, `ShowSearchBox`, `FilterPanelDisplayMode`): Sort, filter row, filter panel, search box
68	- Editing (`EditMode`, `EditModelSaving`, `DataItemDeleting`): EditRow, EditForm, PopupEditForm, EditCell
69	- Selection (`SelectionMode`, `SelectedDataItems`): Single and multiple node selection
70	- Export (`ExportToCsvAsync`, `ExportToXlsxAsync`, `ExportToPdfAsync`): CSV, XLS/XLSX, PDF
71	- **Load

People who liked this also viewed

6 picks

Type

devexpress-blazor-treelist

35stars6forks

View on GitHub

How to install devexpress-blazor-treelist?

devexpress/agent-skills/devexpress-blazor-treelist

$npx -y skills add DevExpress/agent-skills --skill devexpress-blazor-treelist

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor TreeList
2
3	`DxTreeList` is a hierarchical data grid for Blazor. It displays data as a tree with expandable/collapsible rows based on parent-child key relationships. It shares most of DxGrid's feature set — sorting, filtering, CRUD editing, export, selection — and adds tree-specific capabilities such as multi-level expand/collapse, load-on-demand child nodes, and tree filtering modes.
4
5	## When to Use This Skill
6
7	- Display hierarchical data (organizational charts, product categories, file systems, bill of materials)
8	- Bind flat data with parent-child ID relationships (`KeyFieldName` + `ParentKeyFieldName`)
9	- Sort, filter, or page tree nodes
10	- Implement CRUD for hierarchical data (create, edit, delete nodes)
11	- Export tree data to CSV, XLS/XLSX, or PDF
12	- Load child nodes on demand from a remote API
13	- Select single or multiple tree nodes with checkboxes
14	- Reorder tree nodes within the TreeList or move rows between TreeLists and Grids with drag-and-drop
15	- Change node hierarchy (re-parent nodes) via drag-and-drop
16
17	## Prerequisites & Installation
18
19	### NuGet Package
20
21	\| Package \| Purpose \|
22	\|---\|---\|
23	\| `DevExpress.Blazor` \| TreeList + all standard Blazor UI components \|
24
25	```bash
26	# Install from NuGet.org:
27	dotnet add package DevExpress.Blazor
28	```
29
30	### Setup (existing project)
31
32	1. Register DevExpress resources in `Program.cs`:
33	```csharp
34	builder.Services.AddDevExpressBlazor();
35	```
36	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
37	2. Apply a theme and add client scripts in `App.razor` inside `<head>`:
38	```razor
39	@using DevExpress.Blazor
40	@DxResourceManager.RegisterTheme(Themes.Fluent)
41	@DxResourceManager.RegisterScripts()
42	```
43	3. Add the namespace to `_Imports.razor`:
44	```razor
45	@using DevExpress.Blazor
46	```
47
48	## Before You Start — Ask the Developer
49
50	If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code.
51
52	Before generating code, ask:
53
54	1. Render mode: Are you using `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`? (TreeList requires an interactive render mode for tree expansion, filtering, and editing.)
55	2. Data structure: Is your data a flat list with parent ID references, or is it already a nested object graph?
56	3. Key fields: What are the primary key field and the parent key field names? What is the root value (the parent ID of root nodes — `null`, `0`, or something else)?
57	4. Features needed: Do you need editing? Export? Selection? Load-on-demand children?
58	5. New or existing project?: Are you adding the TreeList to an existing project or starting fresh?
59
60	## Component Overview
61
62	`DxTreeList` provides:
63
64	- Data Binding (`Data`, `KeyFieldName`, `ParentKeyFieldName`): Binds flat data with parent-child relationships; `RootValue` defines root nodes
65	- Column Types (`DxTreeListDataColumn`, `DxTreeListCommandColumn`, `DxTreeListSelectionColumn`, `DxTreeListBandColumn`): Same column model as DxGrid
66	- Tree Navigation (`AllowExpandCollapse`, `ExpandedRowKeys`): Expand/collapse tree levels, expand all, collapse all
67	- Data Shaping (`AllowSort`, `ShowSearchBox`, `FilterPanelDisplayMode`): Sort, filter row, filter panel, search box
68	- Editing (`EditMode`, `EditModelSaving`, `DataItemDeleting`): EditRow, EditForm, PopupEditForm, EditCell
69	- Selection (`SelectionMode`, `SelectedDataItems`): Single and multiple node selection
70	- Export (`ExportToCsvAsync`, `ExportToXlsxAsync`, `ExportToPdfAsync`): CSV, XLS/XLSX, PDF
71	- **Load

People who liked this also viewed

6 picks

Type