DevExtreme React - Search Nodes

Searching is disabled in the TreeView widget by default. Assign true to the searchEnabled option to display the search panel. The searchExpr option specifies which data fields should be searched. Assign an array of field names to it if you need to search several fields.

App.vue
  • <template>
  • <DxTreeView
  • data-structure="plain"
  • :data-source="treeViewData"
  • key-expr="key"
  • display-expr="name"
  • parent-id-expr="parent"
  • :search-enabled="true"
  • :search-expr="searchExpr"
  • />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxTreeView } from 'devextreme-vue/tree-view';
  •  
  • const treeViewData = [
  • { key: '1', name: 'Fruits' },
  • { key: '1_1', name: 'Apples', count: 20, parent: '1' },
  • { key: '1_2', name: 'Oranges', count: 3, parent: '1' },
  • { key: '2', name: 'Vegetables' },
  • { key: '2_1', name: 'Cucumbers', count: 15, parent: '2' },
  • { key: '2_2', name: 'Tomatoes', count: 23, parent: '2' }
  • ];
  •  
  • export default {
  • components: {
  • DxTreeView
  • },
  • data() {
  • return {
  • searchExpr: ['count', 'name'],
  • treeViewData
  • };
  • },
  • };
  • </script>

View Demo

When a user types a string in the input field, the TreeView suggests all nodes that contain this string. Assign 'startswith' to the searchMode option if you want the TreeView to suggest only those nodes that start with the input string.

App.vue
  • <template>
  • <DxTreeView
  • data-structure="plain"
  • :data-source="treeViewData"
  • key-expr="key"
  • display-expr="name"
  • parent-id-expr="parent"
  • search-mode="startswith"
  • :search-enabled="true"
  • :search-expr="searchExpr"
  • />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxTreeView } from 'devextreme-vue/tree-view';
  •  
  • const treeViewData = [
  • { key: '1', name: 'Fruits' },
  • { key: '1_1', name: 'Apples', count: 20, parent: '1' },
  • { key: '1_2', name: 'Oranges', count: 3, parent: '1' },
  • { key: '2', name: 'Vegetables' },
  • { key: '2_1', name: 'Cucumbers', count: 15, parent: '2' },
  • { key: '2_2', name: 'Tomatoes', count: 23, parent: '2' }
  • ];
  •  
  • export default {
  • components: {
  • DxTreeView
  • },
  • data() {
  • return {
  • searchExpr: ['count', 'name'],
  • treeViewData
  • };
  • },
  • };
  • </script>

You can customize the search panel by specifying the searchEditorOptions option. The following code changes the panel's default width and placeholder:

App.vue
  • <template>
  • <DxTreeView
  • data-structure="plain"
  • :data-source="treeViewData"
  • key-expr="key"
  • display-expr="name"
  • parent-id-expr="parent"
  • :search-enabled="true">
  • <DxSearchEditorOptions
  • placeholder="Type search value here..."
  • :width="300"
  • />
  • </DxTreeView>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTreeView, {
  • DxSearchEditorOptions
  • } from 'devextreme-vue/tree-view';
  •  
  • const treeViewData = [
  • { key: '1', name: 'Fruits' },
  • { key: '1_1', name: 'Apples', count: 20, parent: '1' },
  • { key: '1_2', name: 'Oranges', count: 3, parent: '1' },
  • { key: '2', name: 'Vegetables' },
  • { key: '2_1', name: 'Cucumbers', count: 15, parent: '2' },
  • { key: '2_2', name: 'Tomatoes', count: 23, parent: '2' }
  • ];
  •  
  • export default {
  • components: {
  • DxTreeView,
  • DxSearchEditorOptions
  • },
  • data() {
  • return {
  • treeViewData
  • };
  • },
  • };
  • </script>
See Also