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

Setting operators for custom filter UI

Hi,

I've created a custom filter UI containing a dropdown list:


Is it possible to just show 'Equal' and 'Not Equal' in the operator dropdown? As the rest are not relevant.


Thanks,

Rob


12 Replies 1 reply marked as answer

VS Vikram Sundararajan Syncfusion Team March 28, 2023 12:47 PM UTC

Hi Rob,


Greetings from Syncfusion support,


Query: Want to customize the filter menu operator list


We have looked through your request and only wish to display the "equal" and "not equal" operators in the list of filter menu operators. By setting the operators property in filtersettings, you can change the default filter operators list.


For further information, read the documentation, code snippets and sample


Api documentation: https://ej2.syncfusion.com/javascript/documentation/grid/filtering/filter-menu/#customizing-filter-menu-operators-list


[Index.js]

 

filterSettings: { type: 'Menu', operators: {

            stringOperator: [

                    { value: 'equal'text: 'Equal' },

                    { value: 'notEqual'text: 'Not Equal' },

                    ],

                    } },

 


Sample: https://stackblitz.com/edit/rs49jy-dpwmva?file=index.html,index.js


If you require further assistance, please do not hesitate to contact us. We are always here to help you.


Regards,

Vikram S



RO Rob March 28, 2023 02:10 PM UTC

Thanks Vikram, however I think this applies to the whole grid? Not just the column with the custom filter dropdown?


I don't want to disable these filters for all columns, just for the custom filter dropdown where they're not relevant.



VS Vikram Sundararajan Syncfusion Team March 30, 2023 04:37 AM UTC

Hi Rob


Greetings from Syncfusion support,


Query: Want to customize the filter menu operator list for only custom filter UI column


Based on your requirement we have prepared sample in that we have showed only specific operators for Customer Name column for that we have used the actionBegin event. The actionBegin event will triggered with beforefilteropen requestType when click filter icon. In that we have changed the stringOperators for customer Name column.


For further information, read the documentation, code snippets and sample.


Customize filter operator: https://ej2.syncfusion.com/javascript/documentation/grid/filtering/filter-menu/#customizing-filter-menu-operators-list


Custom Component: https://ej2.syncfusion.com/javascript/documentation/grid/filtering/filter-menu/#custom-component-in-filter-menu


actionBegin: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin


[Index.js]

 

actionBegin:(args)=>{

        if (args.requestType === "filterbeforeopen") { 

            if (args.columnName === "CustomerName" && args.columnType === "string") {

              args.filterModel.customFilterOperators.stringOperator = [];

              args.filterModel.customFilterOperators.stringOperator = [

              { value: "equal"text: "Equal" },

              { value: "notequal"text: "Not Equal" }];

            }

          }

        }


Sample: https://stackblitz.com/edit/rs49jy-dw8kn9?file=index.html,index.js


If you require further assistance, please do not hesitate to contact us. We are always here to help you.


Regards,

Vikram S


Marked as answer

RO Rob April 11, 2023 04:06 PM UTC

Thanks Vikram - that works.


However, it looks like the TypeScript type for args.filterModel is incorrect.


It's typed as CheckBoxFilterBase, which doesn't specify a customFilterOperators property:


https://github.com/syncfusion/ej2-javascript-ui-controls/blob/276ec7f04671932f52ebc86251f1491bc5106b56/controls/grids/src/grid/base/interface.ts#L1634


https://github.com/syncfusion/ej2-javascript-ui-controls/blob/0c3528043cc1218630c71d7374b876acfedfb885/controls/grids/src/grid/common/checkbox-filter-base.ts#L28


In fact the runtime object seems to be a completely different shape to CheckBoxFilterBase: