Skip to content

Commit e793fef

Browse files
Update after review
1 parent de61070 commit e793fef

1 file changed

Lines changed: 6 additions & 16 deletions

File tree

README.md

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,7 @@
77

88
# DevExtreme DropDownBox - Search Within an Embedded DataGrid
99

10-
This example implements a search that filters data in a [DataGrid](https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/) placed into a [DropDownBox](https://js.devexpress.com/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/) component.
11-
12-
![DropDownBox filtering](./images/dropdownbox-filtering.png)
13-
14-
## Implementation Details
15-
16-
The example handles the following [DropDownBox](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDropDownBox/) events to synchronize search behavior between the input field and the embedded DataGrid:
17-
18-
1. The [onInput](https://js.devexpress.com/jQuery/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onInput) event fires when the user types in the DropDownBox. The event handler opens the dropdown (if it is not already open) and passes the entered text to the Grid's `dataSource.searchValue()` method.
19-
20-
2. The [onOpened](https://js.devexpress.com/jQuery/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onOpened) event fires when the dropdown opens. The event handler registers a one-time listener on the DataGrid to move focus to the component once the grid is ready for keyboard navigation.
21-
22-
3. The [onClosed](https://js.devexpress.com/jQuery/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onClosed) event fires when the dropdown closes. The event handler resets the search state: if the entered text does not match a valid selection, the handler either selects the first available row or clears the DropDownBox value.
10+
This repository contains code referenced in the following DevExtreme help topic: [DropDownBox - How To Search by Field Values (DataGrid)](https://js.devexpress.com/Documentation/Guide/UI_Components/DropDownBox/Search_in_Embedded_Components/#Search_by_Field_Values_DataGrid).
2311

2412
## Files to Review
2513

@@ -40,9 +28,11 @@ The example handles the following [DropDownBox](https://js.devexpress.com/Docume
4028

4129
- [Getting Started with DropDownBox](https://js.devexpress.com/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/)
4230
- [DropDownBox - Synchronize with the Embedded Element](https://js.devexpress.com/Documentation/Guide/UI_Components/DropDownBox/Synchronize_with_the_Embedded_Element/)
43-
- [DropDownBox API - onInput](https://js.devexpress.com/jQuery/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onInput)
44-
- [DropDownBox API - onOpened](https://js.devexpress.com/jQuery/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onOpened)
45-
- [DropDownBox API - onClosed](https://js.devexpress.com/jQuery/Documentation/ApiReference/UI_Components/dxDropDownBox/Configuration/#onClosed)
31+
- [DropDownBox - Search in Embedded Components](https://js.devexpress.com/jQuery/Documentation/Guide/UI_Components/DropDownBox/Search_in_Embedded_Components/)
32+
33+
## More Examples
34+
35+
[DevExtreme DropDownBox - Search Within an Embedded TreeList](https://github.com/DevExpress-Examples/devextreme-dropdownbox-search-in-treelist)
4636

4737
<!-- feedback -->
4838
## Does This Example Address Your Development Requirements/Objectives?

0 commit comments

Comments
 (0)