[Solved] Filter data / Special view / merge different searches
Hello,
I would like to show the data in the popup of a dropdownlist in a special way:
- first are the found items that start with the search string (in alphabetic order)
- then comes the list which contains the found items that have the search string in there string or end with it
Any tipps how this can be done easely? I tried to look for a way to customize the query of the updateData or do a first query with updateData and then append the second query. But it seems that isn't possbile...
best regards
SIGN IN To post a reply.
7 Replies
SP
Sureshkumar P
Syncfusion Team
November 1, 2019 10:01 AM UTC
Hi Michel,
Greetings from Syncfusion support.
Query 1:
first are the found items that start with the search string (in alphabetic order)
Response:
We can achieve your requirement by setting the “sortOrder“as “Ascending“ as mentioned in the below code example.
|
<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>
|
Please find the sample from the below link.
To know more filtering, please find the below documentation link.
Query 2:
then comes the list which contains the found items that have the search string in there string or end with it
Response:
We can achieve your requirement by setting the “filterType“as “endsWith' as mentioned in the below code example.
|
<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>
|
Please find the sample link from the below link.
To know more filtering, please find the below documentation link.
UG Link: https://ej2.syncfusion.com/vue/documentation/drop-down-list/filtering/#change-the-filter-type
Regards,
Sureshkumar P
MP
Michel Pescatore
November 1, 2019 03:42 PM UTC
Hello Sureshkumar P ,
Thank you for your feedback.
There answers are 2 different dropdownlists if I am correct? Then I have to be more precise about my question:
I am looking for one dropdown that filters the data in the special way as I described in the 2 points.
if I have data like:
- ww ii uu aa ee
- ii dd uu ee ss
- zz ii aa ii
- aa bb uu ess oo
then the result would be:
- aa bb uu ess oo -> first all that beginn with the term aa (in sort order)
- ww ii uu aa ee -> then all the contain aa (in sort order)
- zz ii aa ii
Any ideas on this one?
Thank you very much.
best regards.
and I would write aa in the dropbos
SP
Sureshkumar P
Syncfusion Team
November 4, 2019 09:59 AM UTC
Hi Michel,
For this scenario, you can use the filterType as contains and sortOrder as Ascending to achieve your requirement. Please refer the code,
|
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> |
We created a sample based on your requirement. please refer the sample here:
Regards,
Sureshkumar P
MP
Michel Pescatore
November 4, 2019 10:23 AM UTC
Hello Sureshkumar P ,
Thanks again for your answer but I think I have to explain even more. I am not convinced that my case is resolved with one simple query. Lets try the same case with another example.
Items:
- zz bb cc ee ii ff
- uu ff ii ww ss
- aa ii ee ff
- aa bb cc dd ee
- ii zz ee oo
- ii cc rr ff
search term: ii
wanted outcome:
(first all entries that start with the search term in alphabetical order)
- ii cc rr ff
- ii zz ee oo
(then all strings that contain or end with the search term in alphabetical order)
- aa ii ee ff
- uu ff mm ww ii
- zz cc ee ii ff
It seems to me, that I have to do 2 queries and merge the results of them. Don't you agree?
Thank you very much.
best regards
a
SP
Sureshkumar P
Syncfusion Team
November 5, 2019 11:19 AM UTC
Hi Michel,
We have prepared the sample with above requirement in the filtering event. Please refer the code snippet,
|
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);
}
}
|
We created a sample based on your requirement. please refer the sample here:
Reference sample in angular: https://stackblitz.com/edit/angular-zcnsc6?file=app.component.html
Regards,
Sureshkumar P
MP
Michel Pescatore
November 5, 2019 02:23 PM UTC
Hello Sureshkumar P ,
perfect! Thank you very much.
best regards
SP
Sureshkumar P
Syncfusion Team
November 6, 2019 04:07 AM UTC
Hi Michel,
Thanks for your update. Please get back to us if you need further assistance on this
Regards,
Sureshkumar P
SIGN IN To post a reply.
- 7 Replies
- 2 Participants
-
MP Michel Pescatore
- Oct 31, 2019 12:44 PM UTC
- Nov 6, 2019 04:07 AM UTC
