The type of the pickergroup should be gridfieldfilterpickergroup and grid should have gantt instance not ganttConfig
I've updated our typescript react basic demo to implement functionality
Please check the attached test case below
You could run by running these commands
I'm filtering the tasks based on the names. So for names property I need to show only 'contains' operator, but here by default bryntum showing all operators.
Operators.PNG (23.2 KiB) Viewed 323 times
And for other properties also I need only few operators to be displayed but not all. Can we make that operators dropdown customized? If yes, please suggest.
One challenge with this is making sure to filter at the right times, for example in response to the change event from the filter picker group. You need to refresh the option list every time the property is selected, for example.
Another option would be to extend the filter picker class and override the operatorOptions getter, like this:
class MyFieldFilterPicker extends FieldFilterPicker {
static type = 'myfieldfilterpicker';
get operatorOptions() {
let options = super.operatorOptions;
// your logic here
if (this.filter?.property === 'name') {
options = options.filter(({ value }) => value === 'includes');
}
return options;
}
}
MyFieldFilterPicker.initClass();
class MyGridFieldFilterPickerGroup extends GridFieldFilterPickerGroup {
static type = 'mygridfieldfilterpickergroup';
static childPickerType = MyFieldFilterPicker.type;
}
MyGridFieldFilterPickerGroup.initClass();
Then you would use the type name you defined in your UI, like this:
filterPickers : {
type : 'mygridfieldfilterpickergroup',
So could you please provide me a runnable code such that Name property should have only 'contains' operator and status/owner properties should have 'is one of' operator.
If you follow Emil's custom picker approach, you would need to change the following
get operatorOptions() {
let options = super.operatorOptions;
// your logic here
if (this.filter?.property === 'name') {
options = options.filter(({ value }) => value === 'includes');
} else if (this.filter?.property === 'status' || this.filter?.property === 'owner') {
options = options.filter(({ value }) => value === 'is one of');
}
return options;
}