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:



I've had to work around this by casting the filterModel as any, which obviously isn't ideal.


Please can you look into this?


Thanks,


Rob



RO Rob April 11, 2023 04:12 PM UTC

It appears the type for FilterSearchBeginEventArgs.filterModel should be FilterMenuRenderer not CheckBoxFilterBase:


https://github.com/syncfusion/ej2-javascript-ui-controls/blob/0c3528043cc1218630c71d7374b876acfedfb885/controls/grids/src/grid/renderer/filter-menu-renderer.ts#L26



PS Pavithra Subramaniyam Syncfusion Team April 12, 2023 09:43 AM UTC

Rob,


In EJ2 Grid component, the inbuilt support is available for only customizing the operator list for all the columns using the “filterSettings.operators” property. Since you need to customize the operator for individual column only, we provided the solution as a workaround only. So, we suggest the “any” type for the “filterModel” to overcome the typing issue.



RO Rob April 12, 2023 10:13 AM UTC

Thanks, ok I'll stick with any here.


Still seems the typing is incorrect for filterModel as the runtime object is completely different to the type.



PS Pavithra Subramaniyam Syncfusion Team April 13, 2023 12:35 PM UTC

Hi Rob,


We have confirmed the reported scenario as a bug our side and logged a defect report for the same as “Need to set typing for Menu filterbeforeopen event”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will include the defect fix in the April 26th, 2023 patch release. We appreciate your patience until then.


You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link.


Feedback:  https://www.syncfusion.com/feedback/42873/need-to-set-typing-for-menu-filterbeforeopen-event


Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.


Regards,

Pavithra S



RO Rob April 13, 2023 12:38 PM UTC

Excellent, thanks Pavithra - look forward to seeing the fix.



RO Rob April 13, 2023 04:21 PM UTC

Also some of the request action types are incorrect, e.g. filterBeforeOpen (camel case) is actually filterbeforeopen (lower case) at run time:

https://github.com/syncfusion/ej2-javascript-ui-controls/blob/0c3528043cc1218630c71d7374b876acfedfb885/controls/grids/src/grid/base/enum.ts#L50



PS Pavithra Subramaniyam Syncfusion Team April 14, 2023 05:56 AM UTC

Rob,


We will also consider this case changes for “filterBeforeOpen” in our defect report. Please track the status of the below feedback.


https://www.syncfusion.com/feedback/42873/need-to-set-typing-for-menu-filterbeforeopen-event



PS Pavithra Subramaniyam Syncfusion Team June 14, 2023 09:37 AM UTC

Rob,


Thanks for your patience.


We are glad to announce our weekly patch release (21.2.3) is rolled out. We have included the fix for this Need to set typing for Menu filterbeforeopen event issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue on your end.


Feedback link: https://www.syncfusion.com/feedback/42873/need-to-set-typing-for-menu-filterbeforeopen-event


Regards,

Pavithra S


Loader.
Live Chat Icon For mobile
Up arrow icon