Vue TreeList - columnChooser.search
Selector: DxSearch
App.vue (Options API)
App.vue (Composition API)
- <template>
- <DxTreeList ... >
- <DxColumnChooser ... >
- <DxColumnChooserSearch
- :editor-options="searchEditorOptions"
- :enabled="true"
- :timeout="800"
- />
- </DxColumnChooser>
- </DxTreeList>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxTreeList, {
- DxColumnChooser,
- DxColumnChooserSearch,
- // ...
- } from 'devextreme-vue/tree-list';
- export default {
- components: {
- DxTreeList,
- DxColumnChooser,
- DxColumnChooserSearch,
- },
- data() {
- return {
- searchEditorOptions: {
- placeholder: 'Search column',
- mode: 'text'
- }
- };
- }
- }
- </script>
- <template>
- <DxTreeList ... >
- <DxColumnChooser ... >
- <DxColumnChooserSearch
- :editor-options="searchEditorOptions"
- :enabled="true"
- :timeout="800"
- />
- </DxColumnChooser>
- </DxTreeList>
- </template>
- <script setup>
- import 'devextreme/dist/css/dx.light.css';
- import DxTreeList, {
- DxColumnChooser,
- DxColumnChooserSearch,
- // ...
- } from 'devextreme-vue/tree-list';
- const searchEditorOptions = {
- placeholder: 'Search column',
- mode: 'text'
- };
- // ...
- </script>
editorOptions
Selector: editor-options
Type:
any
Default Value: {}
See the TextBox Configuration topic for information about properties you can specify in this object.
NOTE
The nested component that configures the editorOptions property does not support event bindings and two-way property bindings.
App.vue (Options API)
App.vue (Composition API)
- <template>
- <DxTreeList ... >
- <DxColumnChooser ... >
- <DxColumnChooserSearch
- :editor-options="searchEditorOptions"
- // ...
- />
- </DxColumnChooser>
- </DxTreeList>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxTreeList, {
- DxColumnChooser,
- DxColumnChooserSearch,
- // ...
- } from 'devextreme-vue/tree-list';
- export default {
- components: {
- DxTreeList
- },
- data() {
- return {
- searchEditorOptions: {
- placeholder: 'Search column',
- mode: 'text',
- onValueChanged: this.handleValueChange
- }
- };
- }
- methods: {
- handleValueChange(e) {
- // handle the value change here
- }
- }
- }
- </script>
- <template>
- <DxTreeList ... >
- <DxColumnChooser ... >
- <DxColumnChooserSearch
- :editor-options="searchEditorOptions"
- // ...
- />
- </DxColumnChooser>
- </DxTreeList>
- </template>
- <script setup>
- import 'devextreme/dist/css/dx.light.css';
- import DxTreeList, {
- DxColumnChooser,
- DxColumnChooserSearch,
- // ...
- } from 'devextreme-vue/tree-list';
- const searchEditorOptions = {
- placeholder: 'Search column',
- mode: 'text',
- onValueChanged: (e) => {
- // handle the value change here
- }
- };
- // ...
- </script>
timeout
Specifies a timeout, in milliseconds, during which a user may continue to modify the search value without starting the search operation.
Type:
Default Value: 500
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.