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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
<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);
}
}
|
