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

[Sujatha]

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.

[Neli]

Hello Sujatha,

I have replied earlier to the support thread regarding the same issue. I am pasting my reply below as well as it could be helpful to the other users in the forum:

 

Please note that when a component is destroyed you need to remove or empty the  leftover elements of a destroyed component:

- https://docs.telerik.com/kendo-ui/intro/widget-basics/destroy#destroying-components-manually

I modified the Dojo as follows:

- I pass only the id of the element without the '#' sign:

CommonBase.BindcascadeInactiveComboValue("combobox2", 1, "Dep", Rainbow, onChange);

 - Then when the component is destroyed also the leftovers are removed. I use the id string to append a completely new input element from which a new component is initialzied:

ComboBoxDestroy: function (ControlId){
          var current = '#' + ControlId;
          comboBox=$(current).data("kendoComboBox")	  

          if(comboBox != undefined){
            comboBox.destroy();
            var parent = $(current).parent('.k-combobox').parent()
            $($(current).parent('.k-combobox')).remove()
            parent.append('<input id="'+ControlId+'"/>')
          }
},

Here you will find the modified Dojo example - https://dojo.telerik.com/wNrTUutK.

Please review the example and let me know in case you have any additional question on the matter.

 

Regards,
Neli
Progress Telerik