Kendo UI Combo/dropdown/lists Issue | Initiating multiple times.

[IT]

Hi Team,

We extensively use Kendo UI jQuery in our application for various front-end activities. Recently, we attempted to upgrade our Kendo UI version from 2021 to 2024 and encountered issues with comboboxes, dropdowns, and lists.

Many of our controls rely on dynamic data that changes based on multiple factors and requirements. This functionality is critical to our application. However, post-upgrade, we have observed unexpected behavior, as illustrated in the attached screenshots.

To help replicate the issue, we have created a sample in the Kendo Dojo, which can be accessed via the following link:
https://dojo.telerik.com/WyKWJZpa

Please note, The reported behavior is seen in combobox2 on change of combobox1

 

This behavior was not present in the previous version, and the upgrade seems to have introduced this issue. Since this implementation pattern is widespread in our application, modifying the code everywhere is not a feasible option.

We kindly request your assistance in identifying a quick and efficient resolution to this issue.

Thank you in advance for your support.

 

 

 

[IT]

Hi Team,

We are awaiting for your response..!

[Nikolay]

Hello,

Thank you for sharing the Dojo demo.

I examined it and noticed that in the change event handler of the combobox1 you are initializing again the combobox2. plicate widget initialization is not recommended, and it is best to avoid it where possible.

A double initialization over the combobox2 happens and multiple remove icons appear. Is there a specific reason you are doing so?

Once the multiple initialization is removed the problem is gone.

Dojo demo: https://dojo.telerik.com/KPdRLUpQ

Regards,

Nikolay

 

[IT]

Thanks Nikolay for your response!!

Yes, we do invoke child combo box multiple times based on the data selection from the parent/s comboboxes or textbox/es.

There are scenarios wherein parent data may not be selected. In such cases initially we default the data and repopulate the data based on parent data selection.

I have tried to create a scenario to give better understanding of our requirement.

Dojo demo: https://dojo.telerik.com/yemGSDBb

 

 

[Nikolay]

Hi,

Have you considered utilizing the Cascading ComboBox? It is designed to render a series of two or more ComboBoxes in which each ComboBox is filtered according to the selected options in the previous ComboBox. Here is the official documentation:

https://docs.telerik.com/kendo-ui/controls/combobox/cascading

Alternatively, I recommend updating the value in the second CoomboBox in the change event of the first one without reinitializing the component. Iniitializing a component multiple times using the same DOM element is not recommended.

The value update is done using the value() method. You can also use the setOptions() method to update the options without re-initializing the component.

I hope this helps.

Regards,

Nikolay