Kendo Dropdown Wrapper + Kendo data source not working as expected when filtering

[Vincent]

I'm trying to use the Kendo Dropdownlist wrapper (I need the grouping functionality) and the Kendo datasource. 

However when I change the data prop of the KendoDatasource, the changes aren't immediately reflected in the Kendo Dropdownlist.

Repro:
D1kq29 (forked) - StackBlitz 
Steps:
1: Open dropdown, see 2 dropdown items
2: click on 'turn filter on'
3: See that the datasource now only has 1 item
4: open the dropdown, see 2 dropdown items <- not expected
5: click on 'turn filter on' again
6: open dropdown, see 1 dropdown item, despite datasource now actually having 2 items

[Petar]

Hello, Vincent.

Thank you for the shared example. The reason why the Wrapper DropDownList is not working as expected is that the Kendo UI for Vue Wrapper components use the Kendo UI for jQuery suite under the hood and thus the reactivity in the components is limited. The solution you shared will be working as expected if you use the Native DropDownList component instead. 

To update the DropDownList Wrapper in the discussed scenario, you can add the marked in yellow changes below:

<kendo-datasource
  ref="datasource"
  :data="filteredDataItems"
  :key="shouldFilter + 'datasource'"
>
</kendo-datasource>

<kendo-dropdownlist
  :key="shouldFilter + 'dropdownList'"
  :data-source-ref="'datasource'"
  :data-text-field="'name'"
  :data-value-field="'id'"
  style="width: 300px"
>
</kendo-dropdownlist>

Here is an edited version of the example you sent us in which the above changes are applied. In it, you can see that the items in the DropDownList are being updated when the shouldFilter value is changed. 

I hope the above details will help you achieve what you need in your application.

[Vincent]

Thanks, this does the trick

[Petar]

You are welcome! I am happy I could help.

[Vincent]

Fixed by Petar in the comment