Rank 1
Hello,
Is it possible to add a textbox dinamically, by clicking a button?
I have the following code, and I need to add a textbox, just like the one I already have when click the "Add Button"
01.<!DOCTYPE html>02.<html>03.<head>04. <meta charset="utf-8"/>05. <title>Kendo UI Snippet</title>06. 07. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default-v2.min.css"/>08. 09. <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>10. <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/angular.min.js"></script>11. <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>12.</head>13.<body>14. 15. <div>16. <input id="textbox" style="width: 100%;" /> 17. <input type="button" id="add" value="Add TextBox" class="k-button"/>18. </div>19. <script> 20. $(document).ready(function () {21. $("#textbox").kendoTextBox({22. placeholder: "email@email.com.br",23. label: {24. content: "Email",25. floating: true26. }27. });28. })29. </script>30.</body>31.</html>1 Answer, 1 is accepted
Hi, Anna,
thank you for sharing your code.
What you are looking for can be done with a jQuery event:
- add a click event listener to the button
- manipulate the DOM to create and add a new input field to the HTML body with every click.
- initialize the kendo TextBox widget like you have done
Note that you must append the input to the body
$("body").append(textbox);$(textbox).kendoTextBox();
or it will initialize incorrectly. Here is an example: https://dojo.telerik.com/@Stoyan/ItAMiyAW
If you are interested I recommend this tutorial on jQuery events.
I hope to have cleared up the topic. Please don't hesitate to reach out if you have any additional Kendo UI inquiries.
Regards,
Stoyan
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/.