devexpress-blazor-combobox

Name: devexpress-blazor-combobox
Author: DevExpress

35stars6forks

How to install devexpress-blazor-combobox?

devexpress/agent-skills/devexpress-blazor-combobox

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

Installs into the current project.

Summary

--- name: devexpress-blazor-combobox description: Build and configure the DevExpress Blazor ComboBox (DxComboBox) — a drop-down/select editor for Blazor Server, WebAssembly, and Hybrid apps. Use for data binding (sync/async), searching/filtering, grouping, virtualization, multi

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor ComboBox
2
3	`DxComboBox<TData, TValue>` is a text editor with a searchable drop-down list. It binds to strongly-typed collections or custom objects, supports multi-column layouts, grouping, virtual scrolling, cascading dropdowns, and fully customizable item and edit-box templates.
4
5	## When to Use This Skill
6
7	- Add a single-selection dropdown or selector to a Blazor form
8	- Bind to any `IEnumerable<T>`, `IQueryable<T>`, or async collection
9	- Enable live search/filter as the user types
10	- Display grouped items with a group header
11	- Create cascading (dependent) dropdowns
12	- Show multiple columns in the drop-down list
13	- Customise item rendering via `ItemDisplayTemplate` or `EditBoxDisplayTemplate`
14	- Add a Clear button, custom command buttons, or placeholder text
15	- Validate ComboBox selection inside a standard `<EditForm>`
16	- Use virtual scrolling for large lists
17
18	## Prerequisites & Installation
19
20	### NuGet Package
21
22	\| Package \| Purpose \|
23	\|---\|---\|
24	\| `DevExpress.Blazor` \| ComboBox + 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 services 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`:
39	```razor
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	Ask these questions before generating code:
53
54	1. Render mode: Are you using `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`? (`DxComboBox` does not function in Static SSR.)
55	2. Is this a new project or an existing one? New projects can use the DevExpress Template Kit; existing ones need manual setup above.
56	3. Data type: Are you binding to a simple `IEnumerable<string>` (or primitive), a list of custom objects, an `IQueryable<T>`, or loading data asynchronously?
57	4. Value type: Is the bound `Value` the same type as the data items (`TData == TValue`) or a different key type (e.g., `int` ID from a `List<Product>`)?
58	5. Custom objects: If binding to custom objects, have you overridden `Equals` and `GetHashCode` in your model? (Required for correct item matching.)
59	6. Features needed: Do you need search/filter, grouping, multiple columns, cascading, templates, or validation?
60
61	## Component Overview
62
63	```razor
64	@* Minimal example: string list *@
65	<DxComboBox Data="@Cities"
66	@bind-Value="@SelectedCity"
67	NullText="Select a city…"
68	ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
69
70	@code {
71	IEnumerable<string> Cities = new List<string> { "London", "Berlin", "Paris" };
72	string SelectedCity { get; set; }
73	}
74	```
75
76	Key generic parameters:
77	- `TData` — the type of items in the `Data` collection
78	- `TValue` — the type of the bound `Value`; equals `TData` when binding to the whole object
79
80	## Documentation & Navigation Guide
81
82	\| Topic \| Reference File \| When to load \|
83	\|-------\|---------------\|--------------\|
84	\| Getting Started (setup, first ComboBox) \| [references/getting-started.md](references/getting-started.md) \| New project setup or first-time use \|
85	\| Data Binding (simple, custom objects, async, virtual scroll) \| [references/data-binding.md](references/data-binding.md) \| Binding to data or setti

People who liked this also viewed

6 picks

Type

devexpress-blazor-combobox

35stars6forks

View on GitHub

How to install devexpress-blazor-combobox?

devexpress/agent-skills/devexpress-blazor-combobox

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor ComboBox
2
3	`DxComboBox<TData, TValue>` is a text editor with a searchable drop-down list. It binds to strongly-typed collections or custom objects, supports multi-column layouts, grouping, virtual scrolling, cascading dropdowns, and fully customizable item and edit-box templates.
4
5	## When to Use This Skill
6
7	- Add a single-selection dropdown or selector to a Blazor form
8	- Bind to any `IEnumerable<T>`, `IQueryable<T>`, or async collection
9	- Enable live search/filter as the user types
10	- Display grouped items with a group header
11	- Create cascading (dependent) dropdowns
12	- Show multiple columns in the drop-down list
13	- Customise item rendering via `ItemDisplayTemplate` or `EditBoxDisplayTemplate`
14	- Add a Clear button, custom command buttons, or placeholder text
15	- Validate ComboBox selection inside a standard `<EditForm>`
16	- Use virtual scrolling for large lists
17
18	## Prerequisites & Installation
19
20	### NuGet Package
21
22	\| Package \| Purpose \|
23	\|---\|---\|
24	\| `DevExpress.Blazor` \| ComboBox + 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 services 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`:
39	```razor
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	Ask these questions before generating code:
53
54	1. Render mode: Are you using `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`? (`DxComboBox` does not function in Static SSR.)
55	2. Is this a new project or an existing one? New projects can use the DevExpress Template Kit; existing ones need manual setup above.
56	3. Data type: Are you binding to a simple `IEnumerable<string>` (or primitive), a list of custom objects, an `IQueryable<T>`, or loading data asynchronously?
57	4. Value type: Is the bound `Value` the same type as the data items (`TData == TValue`) or a different key type (e.g., `int` ID from a `List<Product>`)?
58	5. Custom objects: If binding to custom objects, have you overridden `Equals` and `GetHashCode` in your model? (Required for correct item matching.)
59	6. Features needed: Do you need search/filter, grouping, multiple columns, cascading, templates, or validation?
60
61	## Component Overview
62
63	```razor
64	@* Minimal example: string list *@
65	<DxComboBox Data="@Cities"
66	@bind-Value="@SelectedCity"
67	NullText="Select a city…"
68	ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
69
70	@code {
71	IEnumerable<string> Cities = new List<string> { "London", "Berlin", "Paris" };
72	string SelectedCity { get; set; }
73	}
74	```
75
76	Key generic parameters:
77	- `TData` — the type of items in the `Data` collection
78	- `TValue` — the type of the bound `Value`; equals `TData` when binding to the whole object
79
80	## Documentation & Navigation Guide
81
82	\| Topic \| Reference File \| When to load \|
83	\|-------\|---------------\|--------------\|
84	\| Getting Started (setup, first ComboBox) \| [references/getting-started.md](references/getting-started.md) \| New project setup or first-time use \|
85	\| Data Binding (simple, custom objects, async, virtual scroll) \| [references/data-binding.md](references/data-binding.md) \| Binding to data or setti

People who liked this also viewed

6 picks

Type