Dynamic switch controls

1 Answer 33 Views
Switch
Rohit
Top achievements
Rank 1
Rohit asked on 09 Aug 2021, 06:58 PM

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.

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 12 Aug 2021, 11:45 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Switch
Asked by
Rohit
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or