Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 148715 | Oct 31,2019 12:44 PM UTC | Nov 6,2019 04:07 AM UTC | Vue | 7 |
|
Tags: DropDownList |
|
<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);
}
}
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
