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. Image for the cookie policy date

[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



7 Replies

SP Sureshkumar P Syncfusion Team November 1, 2019 02:01 AM

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 



MP Michel Pescatore November 1, 2019 07:42 AM

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 01:59 AM

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 02:23 AM

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 03:19 AM

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 



MP Michel Pescatore November 5, 2019 06:23 AM

Hello Sureshkumar P ,

perfect! Thank you very much.

best regards


SP Sureshkumar P Syncfusion Team November 5, 2019 08:07 PM

Hi Michel, 
 
Thanks for your update. Please get back to us if you need further assistance on this 
 
Regards, 
Sureshkumar P 


Loader.
Live Chat Icon For mobile
Up arrow icon