Clear button not working on cascaded combobox with virtualizatiion ON

[Nick]

Hello,

Cascading Comboboxes do not clear and reset values correctly when Virtualization is enabled.

I mimicked the bug though Codepen.

Find it here and follow instructions to reproduce the bug. 

Thank you.

[Georgi Denchev]

Hello, Nick,

I'm sharing information from the support ticket here for better visibility.

The odd behavior occurs because the expanded list does not have all the child items. When virtualization is enabled, the ComboBox loads more items as you scroll down.

The approach of selecting items with the .value() method in the provided example does not work properly because some of the selected elements are on a "different" page.

If the user manually selects an option from the ComboBox, they first need to expand the list and then scroll down to the specific item. This will load the correct page and the link between parent-child will be established when an element is selected. However, if you select an item programmatically and that item is not loaded on the current page, the cascading will be unable to make the relation.

The ComboBox must have a large enough pageSize to render all of the items that can be selected. In the provided example, either the height of the ComboBox must be increased or the itemHeight needs to be reduced.

Alternatively, the values can be manually cleared from each ComboBox by using the value method:

// When the X button of the main parent is clicked, clear the rest of comboboxes.
$("#combobox1").data("kendoComboBox").value("");
$("#combobox2").data("kendoComboBox").value("");
$("#combobox3").data("kendoComboBox").value("");

Best Regards,
Georgi Denchev
Progress Telerik