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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

[Solved] Filter data / Special view / merge different searches

Thread ID:

Created:

Updated:

Platform:

Replies:

148715 Oct 31,2019 12:44 PM UTC Nov 6,2019 04:07 AM UTC Vue 7
loading
Tags: DropDownList
Michel Pescatore
Asked On October 31, 2019 12:44 PM UTC

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



Sureshkumar P [Syncfusion]
Replied On 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. 
 
 
Regards, 
Sureshkumar P 


Michel Pescatore
Replied On 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

Sureshkumar P [Syncfusion]
Replied On 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 
 


Michel Pescatore
Replied On 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

Sureshkumar P [Syncfusion]
Replied On 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:  
 
 
Regards, 
Sureshkumar P 


Michel Pescatore
Replied On November 5, 2019 02:23 PM UTC

Hello Sureshkumar P ,

perfect! Thank you very much.

best regards

Sureshkumar P [Syncfusion]
Replied On 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 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon