Searching in Vue Treegrid component
11 Jun 202419 minutes to read
You can search records in a TreeGrid, by using the search
method with search key as a parameter. This also provides an option to integrate search text box in treegrid’s toolbar by adding search
item to the toolbar
.
To search records, inject the Filter
module in the treegrid.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :toolbar='toolbarOptions' height='270px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { TreeGridComponent as EjsTreegrid, Filter, Toolbar, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const data = sampleData;
const toolbarOptions = ['Search'];
provide('treegrid', [ Filter, Toolbar ]);
</script>
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :toolbar='toolbarOptions' height='270px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Filter, Toolbar, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data () {
return {
data: sampleData,
toolbarOptions: ['Search']
};
},
provide: {
treegrid: [ Filter, Toolbar ]
}
}
</script>
Initial search
To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the searchSettings
.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :toolbar='toolbarOptions' height='270px' :searchSettings='searchOptions' >
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { TreeGridComponent as EjsTreegrid, Filter, Toolbar, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const data = sampleData;
const toolbarOptions = ['Search'];
const searchOptions = { fields: ['taskName'], operator: 'contains', key: 'plan', ignoreCase: true };
provide('treegrid', [ Filter, Toolbar ]);
</script>
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :toolbar='toolbarOptions' height='270px' :searchSettings='searchOptions' >
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Filter, Toolbar, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data () {
return {
data: sampleData,
toolbarOptions: ['Search'],
searchOptions: { fields: ['taskName'], operator: 'contains', key: 'plan', ignoreCase: true }
};
},
provide: {
treegrid: [ Filter, Toolbar ]
}
}
</script>
By default, treegrid searches all the bound column values. To customize this behavior define the
searchSettings.fields
property.
Search operators
The search operator can be defined in the searchSettings.operator
property to configure specific searching.
The following operators are supported in searching:
Operator | Description |
---|---|
startsWith | Checks whether a value begins with the specified value. |
endsWith | Checks whether a value ends with the specified value. |
contains | Checks whether a value contains the specified value. |
equal | Checks whether a value is equal to the specified value. |
notEqual | Checks for values not equal to the specified value. |
By default, the
searchSettings.operator
value iscontains
.
Search by external button
To search treegrid records from an external button, invoke the search
method.
<template>
<div id="app">
<div class="e-float-input" style="width: 200px; display: inline-block;">
<input type="text" class="searchtext"/>
<span class="e-float-line"></span>
<label class="e-float-text">Search text</label>
</div>
<ejs-button id='search' @click='search'>Search</ejs-button>
<ejs-treegrid ref='treegrid' :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='220px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { TreeGridComponent as EjsTreegrid, Filter, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { sampleData } from "./datasource.js";
const data = sampleData;
const treegrid = ref(null);
const search = function() {
let searchText = document.getElementsByClassName('searchtext')[0].value;
treegrid.value.search(searchText);
};
provide('treegrid', [ Filter ]);
</script>
<template>
<div id="app">
<div class="e-float-input" style="width: 200px; display: inline-block;">
<input type="text" class="searchtext"/>
<span class="e-float-line"></span>
<label class="e-float-text">Search text</label>
</div>
<ejs-button id='search' @click='search'>Search</ejs-button>
<ejs-treegrid ref='treegrid' :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='220px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Filter } from "@syncfusion/ej2-vue-treegrid";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data () {
return {
data: sampleData,
};
},
provide: {
treegrid: [ Filter ]
},
methods:{
search: function() {
let searchText = document.getElementsByClassName('searchtext')[0].value;
this.$refs.treegrid.search(searchText);
}
}
}
</script>
Search specific columns
By default, treegrid searches all visible columns. You can search specific columns by defining the specific column’s field names in the searchSettings.fields
property.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :toolbar='toolbarOptions' height='270px' :searchSettings='searchOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { TreeGridComponent as EjsTreegrid, Filter, Toolbar, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const data = sampleData;
const toolbarOptions = ['Search'];
const searchOptions = { fields: ['taskName', 'duration'] };
provide('treegrid', [ Filter, Toolbar ]);
</script>
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :toolbar='toolbarOptions' height='270px' :searchSettings='searchOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='160'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Filter, Toolbar, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data () {
return {
data: sampleData,
toolbarOptions: ['Search'],
searchOptions: {fields: ['taskName', 'duration']}
};
},
provide: {
treegrid: [ Filter, Toolbar ]
}
}
</script>