DropDownBox: add Search in Embedded Components topic by vladaskorohodova · Pull Request #8854 · DevExpress/devextreme-documentation

vladaskorohodova · 2026-06-10T07:31:30Z

No description provided.

Copilot

Pull request overview

Adds a new “Search in Embedded Components” documentation section for DropDownBox, describing how to implement search when embedding DataGrid (flat data) or TreeList (lookup display-value search). It also modernizes parts of the existing “Synchronize with the Embedded Element” topic code samples.

Changes:

Added an overview article explaining shared configuration and the differences between DataGrid (searchValue/searchExpr) and TreeList (lookup-driven filter) search approaches.
Added two new how-to topics: one for embedded DataGrid search and one for embedded TreeList search (lookup scenario).
Updated the existing synchronization topic’s wording and refreshed Angular/Vue/React code samples.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

File	Description
concepts/05 UI Components/DropDownBox/20 Search in Embedded Components/00 Search in Embedded Components.md	New overview article comparing search approaches and shared configuration.
concepts/05 UI Components/DropDownBox/20 Search in Embedded Components/05 DataGrid.md	New DataGrid-focused how-to with multi-framework code snippets.
concepts/05 UI Components/DropDownBox/20 Search in Embedded Components/10 TreeList.md	New TreeList-focused how-to for lookup display-value search.
concepts/05 UI Components/DropDownBox/15 Synchronize with the Embedded Element.md	Refined introductory text + updated framework code samples.

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 13 comments.

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 9 comments.

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

Abadzhev · 2026-06-12T20:41:43Z

@@ -0,0 +1,56 @@
+DropDownBox does not have built-in search. To add search functionality, embed a DataGrid or TreeList and implement filtering manually. The approach depends on whether you search a **regular field** or a **lookup column display value**.


Suggested change

DropDownBox does not have built-in search. To add search functionality, embed a DataGrid or TreeList and implement filtering manually. The approach depends on whether you search a **regular field** or a **lookup column display value**.

When using a DropDownBox with an embedded DataGrid or TreeList, you can turn the component's input field into a search/filter box. Obtain the input field text and construct a filter condition for the dropdown control. Implementation details depend on whether you search a field that holds actual values or lookup IDs.

I would like to keep the original for these reasons:

"lookup IDs" is incorrect. The lookup column scenario is specifically about searching by display value (e.g. an employee name). IDs is what filter resolves to internally

"a field that holds actual values" kinda doesn't mean anything because all fields hold actual values... I personally think it's more vague than a "regular field vs. lookup column"

The "DropDownBox does not have built-in search" sentence is crucial for me. It tells the reader why we are doing this thing in the first place. So your rewrite just loses context

IMHO I wouldn't put implementation details in the intro. The steps below cover the whole implementation thing and I personally think the job of the intro just to orient people on what they should choose. That's why I made a comparison table.

Abadzhev · 2026-06-12T20:42:06Z

+<table class="dx-table">
+    <tr>
+        <th>Aspect</th>
+        <th>Search by regular field (no lookup column involved)</th>


Suggested change

<th>Search by regular field (no lookup column involved)</th>

<th>Search field contains values</th>

See my first comment

Abadzhev · 2026-06-12T20:42:23Z

+    <tr>
+        <th>Aspect</th>
+        <th>Search by regular field (no lookup column involved)</th>
+        <th>Search by lookup column display value (lookup involved)</th>


Suggested change

<th>Search by lookup column display value (lookup involved)</th>

<th>Search field contains lookup IDs</th>

See my first comment

Abadzhev · 2026-06-12T22:02:19Z

+
+### 6) Detect Whether the User Is Searching (`isSearchIncomplete`)
+
+The `isSearchIncomplete` function returns `true` if the user has changed the input text and a new search must be applied (that is, `text` differs from the current `displayValue`):


Suggested change

The `isSearchIncomplete` function returns `true` if the user has changed the input text and a new search must be applied (that is, `text` differs from the current `displayValue`):

The `isSearchIncomplete` function returns `true` if the user has changed the input text and the component must execute another search operation:

Same comment

Abadzhev · 2026-06-12T22:04:59Z

+
+### 8) Reset State in `onClosed`
+
+When the popup closes, DropDownBox [`onClosed`](/api-reference/10%20UI%20Components/dxDropDownBox/1%20Configuration/onClosed.md '/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onClosed') restores consistent state if the user typed something but did not confirm a selection. The search state is cleared by calling `dataSource.filter(null)`.


Suggested change

When the popup closes, DropDownBox [`onClosed`](/api-reference/10%20UI%20Components/dxDropDownBox/1%20Configuration/onClosed.md '/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onClosed') restores consistent state if the user typed something but did not confirm a selection. The search state is cleared by calling `dataSource.filter(null)`.

When the popup closes, the DropDownBox raises its [`onClosed`](/api-reference/10%20UI%20Components/dxDropDownBox/1%20Configuration/onClosed.md '/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onClosed') event. Process situations when the user typed something but did not confirm a selection.

Same comment

Abadzhev

Done

Co-authored-by: Vladimir Abadzhev <vladimira@devexpress.com>

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 9 comments.

DropDownBox: add Search in Embedded Components topic (WIP)

8e79648

vladaskorohodova self-assigned this Jun 10, 2026

Copilot AI review requested due to automatic review settings June 10, 2026 07:31

vladaskorohodova added WIP 26_1 labels Jun 10, 2026

Copilot started reviewing on behalf of vladaskorohodova June 10, 2026 07:31 View session

Copilot AI reviewed Jun 10, 2026

View reviewed changes

Finish working on the articles

29fdeba

vladaskorohodova changed the title ~~DropDownBox: add Search in Embedded Components topic (WIP)~~ DropDownBox: add Search in Embedded Components topic Jun 10, 2026

vladaskorohodova removed the WIP label Jun 10, 2026

vladaskorohodova requested a review from Copilot June 10, 2026 14:35

Copilot AI reviewed Jun 10, 2026

View reviewed changes

Copilot started reviewing on behalf of vladaskorohodova June 10, 2026 14:46 View session

vladaskorohodova added 2 commits June 10, 2026 18:56

Update one snippet's declaration

11d2fdb

Add links to examples in the Overview

bc98c98

Copilot AI review requested due to automatic review settings June 10, 2026 15:01

Copilot started reviewing on behalf of vladaskorohodova June 10, 2026 15:01 View session

Copilot AI reviewed Jun 10, 2026

View reviewed changes

Update after review

ce93e5a

16adianay self-requested a review June 11, 2026 08:38

16adianay approved these changes Jun 11, 2026

View reviewed changes

Update after second review

da32736

Copilot AI review requested due to automatic review settings June 11, 2026 08:47

Copilot started reviewing on behalf of vladaskorohodova June 11, 2026 08:48 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

Potential fix for pull request finding

a73adec

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings June 11, 2026 10:04

Copilot started reviewing on behalf of vladaskorohodova June 11, 2026 10:04 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

Abadzhev reviewed Jun 12, 2026

View reviewed changes

Apply suggestions from code review

cf832c4

Co-authored-by: Vladimir Abadzhev <vladimira@devexpress.com>

Copilot AI review requested due to automatic review settings June 15, 2026 10:34

Copilot started reviewing on behalf of vladaskorohodova June 15, 2026 10:34 View session

Copilot AI reviewed Jun 15, 2026

View reviewed changes

Minor fix

c352873

		@@ -0,0 +1,56 @@
		DropDownBox does not have built-in search. To add search functionality, embed a DataGrid or TreeList and implement filtering manually. The approach depends on whether you search a regular field or a lookup column display value.

	DropDownBox does not have built-in search. To add search functionality, embed a DataGrid or TreeList and implement filtering manually. The approach depends on whether you search a regular field or a lookup column display value.
	When using a DropDownBox with an embedded DataGrid or TreeList, you can turn the component's input field into a search/filter box. Obtain the input field text and construct a filter condition for the dropdown control. Implementation details depend on whether you search a field that holds actual values or lookup IDs.

	<th>Search by regular field (no lookup column involved)</th>
	<th>Search field contains values</th>

	<th>Search by lookup column display value (lookup involved)</th>
	<th>Search field contains lookup IDs</th>


		### 6) Detect Whether the User Is Searching (`isSearchIncomplete`)

		The `isSearchIncomplete` function returns `true` if the user has changed the input text and a new search must be applied (that is, `text` differs from the current `displayValue`):


		### 8) Reset State in `onClosed`

		When the popup closes, DropDownBox [`onClosed`](/api-reference/10%20UI%20Components/dxDropDownBox/1%20Configuration/onClosed.md '/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onClosed') restores consistent state if the user typed something but did not confirm a selection. The search state is cleared by calling `dataSource.filter(null)`.

	When the popup closes, DropDownBox [`onClosed`](/api-reference/10%20UI%20Components/dxDropDownBox/1%20Configuration/onClosed.md '/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onClosed') restores consistent state if the user typed something but did not confirm a selection. The search state is cleared by calling `dataSource.filter(null)`.
	When the popup closes, the DropDownBox raises its [`onClosed`](/api-reference/10%20UI%20Components/dxDropDownBox/1%20Configuration/onClosed.md '/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onClosed') event. Process situations when the user typed something but did not confirm a selection.

Conversation

vladaskorohodova commented Jun 10, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment