Adding a html button to a Radwindow dynamically on the front end

[Jesse]

The code below works i the code behind but I need a rough equivalent doing this on the front end using js.

 

            RadWindow rw = new RadWindow();

          btn.Style.Add("position", "absolute");
            btn.Style.Add("bottom", "5px");
            btn.Style.Add("right", "10px");

 

         rw.ContentContainer.Controls.Add(btn);

 

 

 

Thanks in advance for any suggestions.

 

[Jesse]

Now I am using the set_contentElement method to accomplish this- adding  multiple controls to the window dynamically

          var radWindow = $find("<%=RadWindowManager1.ClientID%>").Open(null,null);
            radWindow.setSize(640, 480);

          var btn = document.createElement("BUTTON");   // Create a <button> element
          var label = document.createElement("LABEL");
          var newDiv = document.createElement('div');

         label.className = "label";

          btn.className = "cbutton";

           newDiv.appendChild(btn);
           newDiv.appendChild(label);
          
           radWindow.set_contentElement(newDiv);

 

But if anyone knows a better method please post it.

 

[Doncho]

Hi Jesse,

Thank you for sharing your solution!

Using the set_contentElement() is the correct approach to dynamically create and insert DOM elements in the RadWindow client-side. 

Another approach could be using predefined Controls or HTML elements inside the RadWindow. You can find it in the Using RadWindow as Controls Container article.

You can also find the Client-side API reference of the RadWindow Object here: https://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/radwindow-object

Concerning creating and appending HTML elements, It can be achieved in multiple ways. jQuery could be convenient for the case, see jQuery - Add Elements

Kind regards,
Doncho
Progress Telerik