Dynamic switch controls

[Rohit]

I have a case where i need to dynamically clone the switch control and use it.
 Im able to clone the switch but the script still refers to the original control .

Tried changing  the id and name properties but still not able to achieve it .

Can anyone let me know how to do it .(FYI im not using mobileswitch)

Thanks in advance.

[Anton Mironov]

Hi Rohit,

Thank you for contacting the team.

In order to achieve the desired behavior, I would recommend trying the following approach:

1. Create your default Kendo UI Switch.
2. Add an empty div element where the cloned Switch should appear.
3. Handle the needed Event for cloning the Switch(in the following example it is a "Click" Event of a button).
4. In the Event handler, use a boolean flag variable from the global scope of the script. It will be used for cloning the Switch once.
5. Get the value of the original Switch.
6. Initialize a new Switch using the div element from step 2.
7. Set the value of the new Switch using the value from point 5.
8. Here is an example of the Event handler:
   

       var isCloned = false;
   
       function onClick(){
   
           if (!isCloned) {
               var value = $("#switch")[0].checked;
   
               $("#cloned").kendoSwitch({
                   checked: value
               });
   
               isCloned = true;
           }
       

Attached is a sample project that I prepared for the case. It includes the approach above.

Make the needed tests locally with the project attached and let me know if further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik