how to add a custom DropDownList filter ?

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

Reply | Reply with quote

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]

<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>

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.

Reply | Reply with quote

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 )

Reply | Reply with quote

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,

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

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>

Documentation : https://ej2.syncfusion.com/documentation/api/grid/column/#allowfiltering

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: `

<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,

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/filtering/?no-cache=1#filter-bar-template-with-custom-component

Please get back to us if you need further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

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"

Reply | Reply with quote

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: `

<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]

}

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#created

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

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

Regards,

Pavithra S.

Reply | Reply with quote

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?

Reply | Reply with quote

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.

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/filtering/#filter-bar-template-with-custom-component

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).

Documentation : https://ej2.syncfusion.com/vue/documentation/api/grid/#filterbycolumn

Please get back to us if you need further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

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

Reply | Reply with quote

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.

Reply | Reply with quote

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?

Reply | Reply with quote

Oleg

Replied On April 5, 2019 05:55 PM UTC

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

Reply | Reply with quote

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

Reply | Reply with quote

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?

Reply | Reply with quote

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.

API Documentation : https://ej2.syncfusion.com/vue/documentation/api/auto-complete/#datasource

UG Documentation : https://ej2.syncfusion.com/vue/documentation/auto-complete/data-binding/

Please get back to us if you need further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
143536	Mar 26,2019 03:25 AM UTC	Apr 8,2019 05:16 AM UTC	Vue	14

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US