how to add a custom DropDownList filter ?
14 Replies
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.
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.
SIGN IN To post a reply.
