We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
<template>
<div class="control_wrapper">
<ejs-dropdownlist id='country' :sortOrder="sortOrder" :dataSource='data' :fields='fields'
:filtering='onFiltering' :filterBarPlaceholder="filterPlaceholder" :popupHeight='height'
:allowFiltering='true' :placeholder='watermark'></ejs-dropdownlist>
</div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { Query } from '@syncfusion/ej2-data';
import * as data from './dataSource.json';
Vue.use(DropDownListPlugin);
export default {
name: 'app',
data() {
return {
fields: { text: 'Name', value: 'Code' },
height: '220px',
watermark: 'Select a country',
filterPlaceholder: 'Search',
data: data['countries'],
sortOrder: "Ascending"
}
},
methods: {
onFiltering: function (e) {
var query = new Query();
//frame the query based on search string with filter type.
query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;
//pass the filter data source, filter query to updateData method.
e.updateData(this.data, query);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>
|
|
<template>
<div class="control_wrapper">
<ejs-dropdownlist id='country' :dataSource='data' :fields='fields' :filterBarPlaceholder="filterPlaceholder"
:popupHeight='height' :allowFiltering='true' :filterType="filterType" :placeholder='watermark'>
</ejs-dropdownlist>
</div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { Query } from '@syncfusion/ej2-data';
import * as data from './dataSource.json';
Vue.use(DropDownListPlugin);
export default {
name: 'app',
data() {
return {
fields: { text: 'Name', value: 'Code' },
height: '220px',
watermark: 'Select a country',
filterPlaceholder: 'Search',
data: data['countries'],
filterType: "endsWith"
}
}
}
</script>
|
|
data() {
return {
fields: { text: 'Name', value: 'Code' },
height: '220px',
watermark: 'Select a country',
filterPlaceholder: 'Search',
data: data['countries'],
filterType: "contains",
sort: 'Ascending'
}
< ejs - dropdownlist id = 'country' : dataSource = 'data' : sortOrder = 'sort' : fields = 'fields' : filterBarPlaceholder = "filterPlaceholder"
: popupHeight = 'height' : allowFiltering = 'true' : filterType = "filterType" : placeholder = 'watermark' > </ejs-dropdownlist> |
|
methods: {
onFiltering: function(e) {
var filteredData = [];
var containsData = [];
var dropdownlistObj = this.$refs.dropdownlistObj.ej2Instances;
var query = new Query();
//frame the query based on search string with filter type.
query = (e.text !== '') ? query.where('Name', 'contains', e.text, true) : query;
//pass the filter data source, filter query to updateData method.
e.updateData(this.data, query);
if (dropdownlistObj.liCollections.length) {
for (let i = 0; i < dropdownlistObj.liCollections.length; i++) {
if (dropdownlistObj.liCollections[i].innerText.indexOf(e.text) === 0) {
filteredData.push(dropdownlistObj.liCollections[i].innerText);
}
else {
containsData.push(dropdownlistObj.liCollections[i].innerText);
}
}
}
filteredData = filteredData.sort();
if (containsData.length) {
containsData = containsData.sort();
for (let i = 0; i < containsData.length; i++) {
filteredData.push(containsData[i]);
}
}
e.updateData(filteredData, null);
}
}
|
