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

how to add a custom DropDownList filter ?

Thread ID:

Created:

Updated:

Platform:

Replies:

143536 Mar 26,2019 03:25 AM UTC Apr 8,2019 05:16 AM UTC Vue 14
loading
Tags: Data Grid
Oleg
Asked On March 26, 2019 03:25 AM UTC

is there a way to add custom component in filter menu based not on select but DropDownList component?

here https://ej2.syncfusion.com/vue/documentation/grid/filtering/#custom-component-in-filter-menu here only regular html select  in the example

Pavithra Subramaniyam [Syncfusion]
Replied On March 26, 2019 05:53 AM UTC

Hi Oleg, 

Greetings from Syncfusion. 

We have updated our Documentation for rendering custom component in filter menu with Essential JavaScript 2 DropDownList component. Please refer to the below code example and screenshot for more information. 

[Vue] 
<template> 
    <div id="app"> 
        <ejs-grid :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px'> 
            <e-columns> 
                <e-column field='OrderID' :filter= 'filter' headerText='Order ID' textAlign='Right' width=100></e-column> 
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column> 
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column> 
            </e-columns> 
        </ejs-grid> 
    </div> 
</template> 
<script> 
import Vue from "vue"; 
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids"; 
import { data } from './datasource.js'; 
import { DropDownList } from "@syncfusion/ej2-dropdowns"; 
import { DataManager } from "@syncfusion/ej2-data"; 
import {createElement} from "@syncfusion/ej2-base"; 

Vue.use(GridPlugin); 

export default { 
  data() { 
      let dropInstance = null; 
    return { 
      data: data, 
      filterOptions: { 
           type: 'Menu' 
        }, 
        filter: { 
            ui: { 
                create: function (args) { 
                    let db = new DataManager(data); 
                    let flValInput = createElement('input', { className: 'flm-input' }); 
                    args.target.appendChild(flValInput); 

                    dropInstance = new DropDownList({ 
                    dataSource: new DataManager(data), 
                    fields: { text: 'OrderID', value: 'OrderID' }, 
                    placeholder: 'Select a value', 
                    popupHeight: '200px' 
                }); 
                dropInstance.appendTo(flValInput); 
                }, 
                write: function (args) { 
                    dropInstance.value = args.filteredValue; 
                }, 
                read: function (args) { 
                    args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.value); 
                } 
            } 
        } 
    }; 
  }, 
  provide: { 
    grid: [Filter] 
  } 
} 

 

If you are facing  any issue please get back to us with more details that will be helpful for us to provide a better solution as early as possible. 

Regards, 
Pavithra S. 



Oleg
Replied On March 26, 2019 11:09 AM UTC

Thank you for the quick answer but looks like it's not what I need.

I don't need menu type "menu" for all columns - but 

1 first column no filter at all - can I disable filtering for one column only?
2 second column - my custom select 
3 - rest of the columns - a regular  "Filter bar"

I have to use "Filter bar" because see no way to remove "no records found"  on typing  (my data comes paginated from the server side and autocomplete will never work )



Pavithra Subramaniyam [Syncfusion]
Replied On March 27, 2019 07:04 AM UTC

Hi Oleg, 
 
We have analyzed your requirement and based on your requirement we have prepared a sample and attaching the sample for your convenience. Please find the sample link below, 
 
To disable filtering for the particular column, we suggest you to set the “allowFiltering” property of Grid columns for the particular column to false. Please find the code below, 
 
 
<e-column field='OrderID' :allowFiltering='false' headerText='Order ID' textAlign='Right' width=100></e-column> 
 
 
 
To have a custom select(EJ2 Dropdown list) in the filterbar, we suggest you to use the “filterBarTemplate” property of Grid columns. Please refer the code and documentation below, 
 
template: ` 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid"  :dataSource="data" :allowFiltering='true' height='273px'> 
            <e-columns> 
                <e-column field='OrderID' :allowFiltering='false' headerText='Order ID' textAlign='Right' width=100></e-column> 
                <e-column field='CustomerID' headerText='Employee ID' width=120 :filterBarTemplate='templateOptions'></e-column> 
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column> 
            </e-columns> 
        </ejs-grid>  
    </div> 
`, 
 
  data() { 
    return { 
      data: data, 
      templateOptions: { 
            create: function (args) { 
                elem = document.createElement('input'); 
                return elem; 
           },  
            write: function (args) { 
              dObj = new DropDownList({ 
                dataSource: data, 
                fields: { text: "CustomerID" }, 
                change: function (args) { 
                  var selVal = args.value; 
                  var grid = document.getElementById('Grid').ej2_instances[0]; 
                  grid.filterByColumn("CustomerID", "equal", selVal); 
                }  
              }); 
              dObj.appendTo(elem); 
            }, 
        } 
 
 
Please refer the documentation below, 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


Oleg
Replied On March 27, 2019 05:20 PM UTC

I want to thank you for a quick response

Well... I checked your example and yes, OrderID filter is disabled and I know, " :allowFiltering='false'" command. but the filter input is still visible. Is there a way to completely hide it? Just show nothing?

And once again - 
first column - no filter
second column - my own dropdownlist
all other columns - regular  "Filter bar"


Pavithra Subramaniyam [Syncfusion]
Replied On March 28, 2019 09:43 AM UTC

Hi Oleg, 

Thanks for your update. 

You can hide the filterbar cell for the particular column by using the “created” event of Grid component. We have prepared a sample based on you query please refer to the below code example for more information. 
 
[vue] 
template: ` 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid" :created=created  :dataSource="data" :allowFiltering='true'> 
            <e-columns> 
                <e-column field='OrderID' :allowFiltering='false' headerText='Order ID' textAlign='Right' width=100></e-column> 
                <e-column field='CustomerID' :filterBarTemplate='templateOptions' headerText='Customer ID' width=120></e-column> 
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column> 
            </e-columns> 
        </ejs-grid>  
    </div> 
`, 
.  .  . 
  }, 
  methods:{ 
     created: function(e) { 
       this.$refs.grid.ej2Instances.getHeaderTable().querySelector(".e-filterbarcell div").style.display = "none" 
        
    }, 
     
  }, 
    provide: { 
    grid: [Filter] 
} 
 

Sample               : https://plnkr.co/edit/aoYTh6sDs1B40SgBrTmB?p=preview  

Please get back to us if you need any further assistance on this. 

Regards, 
Pavithra S. 
 


Oleg
Replied On March 28, 2019 01:45 PM UTC

Thanks, Pavithra


One more last question - is there a way to add a custom filter input using Algolia search as a resource?

Pavithra Subramaniyam [Syncfusion]
Replied On March 29, 2019 07:15 AM UTC

Hi Oleg, 

We have analyzed your requirement. You can achieve this requirement by using the “filterBarTemplate” feature of Grid, as like the “dropdownlist” from the sample which we have shared from our previous update. 
 
In our sample from previous update, we have rendered the dropdown list component in the filter bar by using the “create” and “write” functions. In the “create” function we have created the input element and in the “write” function we will be defining our custom component(dropdown) and append this to the created input element. Just like this you can render your own custom component in the filter bar. You need to create the element to contain your component in the “create” function and in the “write” function you need to define your component and append that to the created element. Finally need to use the “filterByColumn” method to filter the values(we have used this method in the “change” event of dropdown, so that when value in dropdown is changed it will filter based on the changed value). 

Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 
 


Oleg
Replied On April 3, 2019 04:38 PM UTC

thank you Pavithra

Regarding Algolia search custom filter - seems like I'm doing something wrong

I see my autocomplete element but something is taking focus on type in it.


this how I have my colum 

 <e-column  
                                    :filterBarTemplate='filterAlgoliaId'
                                     :isPrimaryKey='true' field='id' :headerText="ID" ></e-column>


This is my autocomplete element 

var index = algolia('***', '*****')

export const formTemplatesAutocomplete = selector => {
    var formTemplates = index.initIndex('formTemplates')

    return autocomplete(selector, {}, {
        source: autocomplete.sources.hits(formTemplates, { hitsPerPage: 10 }),
        displayKey: 'reference',
        templates: {
            suggestion (suggestion) {
              console.log('suggestion',suggestion)
                return '<span>' + suggestion.reference + '</span>'
            },
            empty: '<div class="aa-empty">No records found.</div>'
        }
    })
}


Filter: 


filterAlgoliaId: {
            create: function (args) {
                let dd = document.createElement('input');
               return dd
            },
            write: function (args) {
               
                var formTemplates = formTemplatesAutocomplete(args.element).on('autocomplete:selected', (e, selection) => {
                    console.log('args',args, selection)
                    this.$refs.grid.filterByColumn(args.currentTarget.id, 'equal', value);
            }
        },

Screenshot in the attachment









Attachment: Screen_Shot_20190403_at_12.34.56_1ac33d83.zip

Pavithra Subramaniyam [Syncfusion]
Replied On April 4, 2019 10:00 AM UTC

Hi Oleg, 

Thanks for your update. 

We have analyzed the screenshot you have shared with us. We would like to inform you that, you have to apply the css for your custom component rendered in the filter bar cell of Grid, based on your needs. As you have placed a custom component which is not a Syncfusion component, the style for integrating the Grid and Algolia search, will not be handled and it needs to be handled at application level only. This is why the algolia search is hide behind the Grid table. To make it appear above the Grid you need to set the “z-index” value based on your requirement, for your Algolia search component.  

In the sample from our previous update(dropdown list in filter bar cell), you could see that we have set the “z-index” for Syncfusion drop down list component(it is calculated and applied by our source level itself). As Drop down list is a Syncfusion component we have handled the style for integrating dropdown and Grid at our source level. Please refer the below screenshot. As you are adding a custom Algolia search to Syncfusion Grid, the integration styles needs to be handled at application level. So we suggest you to set css(z-index) for the “Algolia search” based on your requirement. 

 

Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


Oleg
Replied On April 5, 2019 12:58 PM UTC

Hi Pavithra

This is not the case.
I know that I have no css for the element yet.
The issue : I can not type in the field.
Only if i hold mouse right click and type I see my autocomplete dropdown and actually can type something in the filed.
Something is taking control (focus) 
Do you have any idea what it can be?
Maybe I insert my autocomplete a wrong way? Maybe in create aI have to make new input field and attach my autocomplete in write method?




Oleg
Replied On April 5, 2019 05:55 PM UTC

maybe you have a better solution - use your autocomplete with algolia as a filter?



Oleg
Replied On April 5, 2019 06:22 PM UTC

Ok. I found the problem - 
I have 2 filter inputs and the first one always takes focus over alogolia input

No idea how to remove it..... but if I manually delete it from DevTool - everything works!!

please help


My code 


filterAlgoliaId: {
                create: function(args) {
                    let algoliaElem = document.createElement('input');
                    algoliaElem.setAttribute("id", "algoliaElem");

                    return algoliaElem
                },
                write: function(args) {
                    formTemplatesAutocomplete('#algoliaElem').on('autocomplete:selected', (e, selection) => {
                        console.log('!!!!!',e,selection)
                    })

                }
            },


Attachment: Screen_Shot_20190405_at_14.17.50_ce4bc626.zip

Oleg
Replied On April 5, 2019 06:56 PM UTC

the issue is in my atocomplete.js

it creates 2 inputs

/
$hint = $input.clone().css(options.css.hint).css(getBackgroundStyles($input));
/

And syncfusion grid ads focus on the first one always.

Will be great to use one of syncfusion elements but how to assign algolia search as a datasource? Is it even possible? 




Pavithra Subramaniyam [Syncfusion]
Replied On April 8, 2019 05:16 AM UTC

Hi Oleg, 

Thanks for the update. 

We have analyzed your query and you can bind data to EJ2 AutoComplete by using the “dataSource” property of AutoComplete. We suggest you to refer to the below documentations to bind data to an EJ2 AutoComplete component.  
 

Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


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