[VUE 3] Filter panel exception

[hexasense]

Hi,

when we are using custom operators in the filter pickers we receive an exception when we want to delete/disable a filter in the filtering panel. Could you please help us, why this is happening? We attached a video (https://youtu.be/o7-d1oqS_g4) and source code to reproduce the exception.

Kind regards,

[saki]

I see at least 2 problems here:

1. using of features object must not be used in Vue. See please: https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/vue/guide#features
2. you set read-only property https://bryntum.com/products/scheduler/docs/api/Core/widget/Container#property-widgetMap

If you need panel to know the instance of the grid you need to find another method of passing it, not through widgetMap. One of the possibilities would be to pass grid ref as an argument to usePanelConfig and treat is as a Vue ref in the listener.

[hexasense]

Hi,

thanks for the quick reply.
I changed the code, but i still get the same error, here is the changed code.

Regards,

[saki]

It seems that the problem is in your implementation of getFieldFilterPickerConfig function. See please our examples what this function is expected to do and to return.

I suppose that you want the setup similar to https://bryntum.com/products/grid/examples/fieldfilters/ but your demo behaves differently. Clicking add filter in column menu adds filter to the right panel. Then, clicking on the right panel checkbox does not find the correct parent.

[hexasense]

Hi,

the first sample we provided worked fine for the selection on the filter panel, than we changed it based upon your suggestions. You suggest, to have another change, that would take us back to the first example, because the first example is based upon the page you suggested. (See: viewtopic.php?t=27484) It seems to me, that we are going back to sqare one. So we would like to ask you, for an example (based upon the example in the link in this reply), where we can set our own operators in the getFieldFilterPickerConfig. These operators should be used in the grid and the filter panel as well. The example should be in vue.
Thank you, in advance.

[ghulam.ghous]

Hi hexasense,

I have created a ticket here to further investigate this issue. You can subscribe to it to keep track of updates https://github.com/bryntum/support/issues/8837. Also we have created a high prio ticket to port the vanilla fieldFilters demo to Vue3. Here's the ticket for demo: https://github.com/bryntum/support/issues/8836

Thanks for your patience and apologies for the delayed response.

Regards,
Ghous

[rubi]

Hi hexasense,

Thank you for your kind patience and awaiting.

Me and Saki took more look into the issue and created Grid Fieldfilters demo in Vue 3 Vite Typescript version for your kind review.

To run the demo, please use these commands

$ npm i 
$ npm start

We hope you find it helpful and please feedback us anytime if you have any questions.

Best Regards,
Rubi

[hexasense]

Hi Rubi,

thank you, but we have custom operators, that part is causeing problems even with yout code. If we change the FilterUtils.ts so it contains an operators property, and try to filter from the panel than we receive a lot of exceptions. Ex:

operators: {
string: [ { value: '=', text: 'custom equals' }, { value: '<>', text: 'custom not equals'}, { value: 'includes', text: 'custom includes'}, { value: 'doesNotInclude', text: 'custom not includes'},
]
}.

We need these custom operators, we can not circumnavigate around it.

BR

[ghulam.ghous]

Hi,

I have just tried it and does not have any errors, I used the following code inside FilterUtils.ts:

const canDeleteFilter = (filter: { id: string }) =>
  filter.id !== "permanent-filter-1";

// Pass specific options to the child `FieldFilterPicker` based on the filter id
const getFieldFilterPickerConfig = (filter: { id: string }) =>
  filter.id === "permanent-filter-1"
    ? {
        // Disable property and operator for the permanent filter
        propertyLocked: true,
        operatorLocked: true,
      }
    : {
        operators: {
          string: [
            { value: "=", text: "custom equals" },
            { value: "<>", text: "custom not equals" },
            { value: "includes", text: "custom includes" },
            { value: "doesNotInclude", text: "custom not includes" },
          ],
        },
      };

export { canDeleteFilter, getFieldFilterPickerConfig };

Here's the clip, showing it in action: https://drive.google.com/drive/folders/1hzaqn2RaHk6g7a-7tftYc4g0Z4nzC7Yd?usp=sharing

Can you please share more details on what exceptions you are seeing in console?

Regards,
Ghous

[hexasense]

Hi,

thanks for the reply.
Find below our code and a video of "Bryntum Grid - FieldFilterPickerGroup demo (Vue 3 + Vite) " (https://youtu.be/bKaNUkB1lZI) with console details. Please try to filter from the panel than will receive a lot of exception:

// Pass specific options to the child `FieldFilterPicker` based on the filter id
const getFieldFilterPickerConfig = (filter: { id: string; }) =>
    filter.id === 'permanent-filter-1'
        ? {
            // Disable property and operator for the permanent filter
            propertyLocked : true,
            operatorLocked : true,
            /*operators: {
                string: [
                    { value: '=', text: 'custom equals' },
                    { value: '<>', text: 'custom not equals'},
                    { value: 'includes', text: 'custom includes'},
                    { value: 'doesNotInclude', text: 'custom not includes'},                    

                ]}*/
        }
        : {
            operators: {
                string: [
                    { value: '=', text: 'custom equals' },
                    { value: '<>', text: 'custom not equals'},
                    { value: 'includes', text: 'custom includes'},
                    { value: 'doesNotInclude', text: 'custom not includes'},                    

                ]
            }
        };