devexpress-blazor-grid

Name: devexpress-blazor-grid
Author: DevExpress

35stars6forks

How to install devexpress-blazor-grid?

devexpress/agent-skills/devexpress-blazor-grid

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

Installs into the current project.

Summary

--- name: devexpress-blazor-grid description: Build and configure the DevExpress Blazor Grid (DxGrid) — a full-featured data grid for Blazor Server, WebAssembly, and Hybrid apps. Use when binding tabular data (IEnumerable/IQueryable/EF Core/server-mode/custom sources), enabling

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Grid
2
3	`DxGrid` is a high-performance data grid for Blazor applications. It supports data binding to in-memory collections, Entity Framework Core, server-mode sources, and custom data sources. Key feature areas include sorting, grouping, filtering, multi-mode editing (edit row, edit form, popup, cell), row selection, data export (CSV/XLS/PDF), column templates, summaries, and drag-and-drop row reordering.
4
5	## When to Use This Skill
6
7	- Display tabular data from any .NET data source in a Blazor page
8	- Implement CRUD operations (create, update, delete rows) with built-in edit forms
9	- Sort, group, filter, and search grid data in the UI or programmatically
10	- Export data to CSV, XLSX, or PDF with custom formatting
11	- Enable row selection (single or multiple) and act on selected data
12	- Add column chooser, resize, reorder, and freeze (pin) columns
13	- Use virtual scrolling for large in-memory datasets
14	- Bind to large remote datasets via EF Core server-mode sources
15	- Customize cell appearance using templates and `CustomizeElement`
16	- Add a toolbar, context menu, or summary rows to the grid
17
18	## Prerequisites & Installation
19
20	### NuGet Package
21
22	\| Package \| Purpose \|
23	\|---\|---\|
24	\| `DevExpress.Blazor` \| Grid + all standard Blazor UI components \|
25
26	```bash
27	# Install from NuGet.org:
28	dotnet add package DevExpress.Blazor
29	```
30
31	### Setup (existing project)
32
33	1. Register DevExpress resources in `Program.cs`:
34	```csharp
35	builder.Services.AddDevExpressBlazor();
36	```
37	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
38	2. Apply a theme and add client scripts in `App.razor` inside `<head>`:
39	```razor
40	@using DevExpress.Blazor
41	@DxResourceManager.RegisterTheme(Themes.Fluent)
42	@DxResourceManager.RegisterScripts()
43	```
44	3. Add the namespace to `_Imports.razor`:
45	```razor
46	@using DevExpress.Blazor
47	```
48
49	## Before You Start — Ask the Developer
50
51	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.
52
53	Before generating code, ask:
54
55	1. Render mode: Are you using `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`? (Grid requires an interactive mode for sorting, filtering, editing, and paging.)
56	2. Data source: Are you binding to a simple in-memory collection (`List<T>`, `IEnumerable<T>`), EF Core (`DbSet<T>` or `EntityInstantFeedbackSource`), `IQueryable<T>`, or a custom data source (`GridCustomDataSource`)?
57	3. Features needed: Do you need editing (which mode: EditRow, EditForm, PopupEditForm, EditCell)? Export? Selection? Virtual scrolling?
58	4. Key field: Does your data model have a primary key property? (Required for editing, selection, and server-mode sources.)
59	5. New or existing project?: Are you adding the grid to an existing project or starting fresh?
60
61	> Ask before generating. Render mode and data source type significantly affect the code.
62
63	## Component Overview
64
65	`DxGrid` provides:
66
67	- Data Binding (`Data`, `KeyFieldName`): Binds to `IEnumerable<T>`, `IListSource`, `IQueryable<T>`, `GridDevExtremeDataSource<T>`, or `GridCustomDataSource`
68	- Column Types (`DxGridDataColumn`, `DxGridCommandColumn`, `DxGridSelectionColumn`, `DxGridBandColumn`): Bound, unbound, command, selection, and band columns
69	- Data Shaping (`AllowSort`, `ShowGroupPanel`, `ShowSearchBox`, `FilterPanelDisplayMode`): Sort, group, filter row, filter panel, search box
70	- Editing (`EditMode`, `EditModelSaving`, `DataItemDeleting`): EditRow, EditForm, PopupEditForm, EditCell modes
71	- Selection (`SelectionMode`, `SelectedDataItems`): Sing

People who liked this also viewed

6 picks

Type

devexpress-blazor-grid

35stars6forks

View on GitHub

How to install devexpress-blazor-grid?

devexpress/agent-skills/devexpress-blazor-grid

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Grid
2
3	`DxGrid` is a high-performance data grid for Blazor applications. It supports data binding to in-memory collections, Entity Framework Core, server-mode sources, and custom data sources. Key feature areas include sorting, grouping, filtering, multi-mode editing (edit row, edit form, popup, cell), row selection, data export (CSV/XLS/PDF), column templates, summaries, and drag-and-drop row reordering.
4
5	## When to Use This Skill
6
7	- Display tabular data from any .NET data source in a Blazor page
8	- Implement CRUD operations (create, update, delete rows) with built-in edit forms
9	- Sort, group, filter, and search grid data in the UI or programmatically
10	- Export data to CSV, XLSX, or PDF with custom formatting
11	- Enable row selection (single or multiple) and act on selected data
12	- Add column chooser, resize, reorder, and freeze (pin) columns
13	- Use virtual scrolling for large in-memory datasets
14	- Bind to large remote datasets via EF Core server-mode sources
15	- Customize cell appearance using templates and `CustomizeElement`
16	- Add a toolbar, context menu, or summary rows to the grid
17
18	## Prerequisites & Installation
19
20	### NuGet Package
21
22	\| Package \| Purpose \|
23	\|---\|---\|
24	\| `DevExpress.Blazor` \| Grid + all standard Blazor UI components \|
25
26	```bash
27	# Install from NuGet.org:
28	dotnet add package DevExpress.Blazor
29	```
30
31	### Setup (existing project)
32
33	1. Register DevExpress resources in `Program.cs`:
34	```csharp
35	builder.Services.AddDevExpressBlazor();
36	```
37	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
38	2. Apply a theme and add client scripts in `App.razor` inside `<head>`:
39	```razor
40	@using DevExpress.Blazor
41	@DxResourceManager.RegisterTheme(Themes.Fluent)
42	@DxResourceManager.RegisterScripts()
43	```
44	3. Add the namespace to `_Imports.razor`:
45	```razor
46	@using DevExpress.Blazor
47	```
48
49	## Before You Start — Ask the Developer
50
51	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.
52
53	Before generating code, ask:
54
55	1. Render mode: Are you using `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`? (Grid requires an interactive mode for sorting, filtering, editing, and paging.)
56	2. Data source: Are you binding to a simple in-memory collection (`List<T>`, `IEnumerable<T>`), EF Core (`DbSet<T>` or `EntityInstantFeedbackSource`), `IQueryable<T>`, or a custom data source (`GridCustomDataSource`)?
57	3. Features needed: Do you need editing (which mode: EditRow, EditForm, PopupEditForm, EditCell)? Export? Selection? Virtual scrolling?
58	4. Key field: Does your data model have a primary key property? (Required for editing, selection, and server-mode sources.)
59	5. New or existing project?: Are you adding the grid to an existing project or starting fresh?
60
61	> Ask before generating. Render mode and data source type significantly affect the code.
62
63	## Component Overview
64
65	`DxGrid` provides:
66
67	- Data Binding (`Data`, `KeyFieldName`): Binds to `IEnumerable<T>`, `IListSource`, `IQueryable<T>`, `GridDevExtremeDataSource<T>`, or `GridCustomDataSource`
68	- Column Types (`DxGridDataColumn`, `DxGridCommandColumn`, `DxGridSelectionColumn`, `DxGridBandColumn`): Bound, unbound, command, selection, and band columns
69	- Data Shaping (`AllowSort`, `ShowGroupPanel`, `ShowSearchBox`, `FilterPanelDisplayMode`): Sort, group, filter row, filter panel, search box
70	- Editing (`EditMode`, `EditModelSaving`, `DataItemDeleting`): EditRow, EditForm, PopupEditForm, EditCell modes
71	- Selection (`SelectionMode`, `SelectedDataItems`): Sing

People who liked this also viewed

6 picks

Type