Filter component - custom dropdown editor doesn't show selected value

[Mat]

I'm using the Filter component with Grid -- both bound to the same filter value, similar to the example shown in the docs here: Vue Data Tools Library & Filter - Custom editors - Kendo UI for Vue Docs & Demos

However, as in the example given, I can't get the custom dropdown to show the value of the currently aplied filter for the corresponding field.

In the example, if you change the operator of the Product Name filter using the filter row, the operator dropdown in the Filter component is updated to match. However, if you change the filter value in the filter row to, for example 'Chang', the dropdown in the Filter component is not updated to match the applied filter.

If you remove the custom dropdown, the value field in the Filter component will reflect the value aplied in the filter row. This is the two-way binding I'm trying to achieve with a custom filter component.

Please advise.

[Filip]

Hi, Mat,

I tested the provided example, however I was not able to observe the behavior in which the dropdown in the Filter component is not updated to match the applied filter. If possible can you please share a runnable example that matches your implementation and reproduces the issue or send me a video of the taken steps in the shared demo? Reproducing it locally will enable me to look for a possible solution.

Regards,
Filip

[Mat]

Hi. This is an updated version of the example in the docs: 9ms3gz7t (forked) - StackBlitz

All that's changed is that the initial value of `filter` has been set. As you can see, the dropdown in the Filer component does not change to match the entered value.

filter: {

        logic: 'and',

        filters: [{ field: 'ProductName', operator: 'eq', value: 'Chai' }],

      }

 

[Filip]

Hello, Mat,

Thank you for the provided example. I tested it and it seems that passing the value to the filters will display the value for the filter itself, in the photo I can see that the `Chai` value is shown for the Grid `ProductName` filter. Just to make sure I understand the requirement, the used filter must be present in the Product Name DropDownList is that correct?

Regards,
Filip

[Mat]

Hi,

Yes... both the Grid and the Filter conponent are using the same value for fillter, so they should both update accordingly. The dropdown in the Filter component in the example I gave should have 'Chai' selected. If it was not a DropDownList, but a regular text box, it would show 'Chai'.

Thanks. 

[Filip]

Hi, Mat, 

This looks like an issue with the component I will investigate further if this is the case and get back to you.

Regards,
Filip

[Filip]

Hi, Mat,

After further inspection it seems that the issue is due to a mismatch between the expected format of the value in the `EnumFilter` and the actual value from the filter. I have updated the example and it seems that the value is displayed as expected now:

• https://stackblitz.com/edit/m6w1khdi-emrtayqe?file=src%2FCustomEnumFilter.vue

Please let me know in case further questions arise.

Regards,
Filip