This is a migrated thread and some comments may be shown as answers.

Dynamic javascript control creation/cloning

1 Answer 196 Views
Input
This is a migrated thread and some comments may be shown as answers.
Louis
Top achievements
Rank 1
Louis asked on 18 Feb 2011, 04:08 PM
Hello guys

I'm trying to create or activate or clone a raddatepicker dynamically using javascript and webservices
Now I tried 2 scenarios
-Render the control using webservices like this, the control appears ok, but nothing work on it (no validation, dropdown button...) and the rendered string is pretty massive, is there a function that I could use to bind/initialize the control to static scripts?

<WebMethod()> _
    Public Function HelloWorld(ByVal s As String) As String
         Dim np As Page = New Page
        np.Controls.Add(New Telerik.Web.UI.RadScriptManager)
        Dim d As Telerik.Web.UI.RadDatePicker = New Telerik.Web.UI.RadDatePicker
        d.ID = "ddd"
        d.EnableViewState = False
        d.DbSelectedDate = Now
        d.RegisterWithScriptManager = False
        d.Page = np
 
        Dim tw As System.IO.StringWriter = New System.IO.StringWriter()
        Dim hw As HtmlTextWriter = New HtmlTextWriter(tw)
        d.RenderControl(hw)
        Return tw.ToString()
    End Function


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<!--http://code.jquery.com/jquery-1.5.js-->
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
     <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <script language="javascript" type="text/javascript">
        function BC(s, e) {
            $.ajax({ url: "/Webservice1.asmx/HelloWorld?s=" + s.get_id(), success: function (result) {
                 //var nd = $("#RadDatePicker1")[0].cloneNode();
                //nd.id = "asd";
                $("#c")[0].innerHTML = result.text;
                //$("#c")[0].insertBefore($("#RadDatePicker1")[0]);
                //nd.style.visibility = "visible";
            }
            });
        }
                </script>
 
        <div id="c"></div>
    <div>
<!--        <telerik:RadDatePicker ID="RadDatePicker1" Runat="server"></telerik:RadDatePicker>-->
         
<telerik:RadButton ID="RadButton1" runat="server" onclientclicked="BC"
            AutoPostBack="False">
</telerik:RadButton>
    </div>
    </form>
</body>
</html>


-Then I tryed the cloneNode function, but I can't even make the raddatepicker appear
var nd = $("#RadDatePicker1")[0].cloneNode(true);
                
nd.id = "asd";
               $("#c")[0].insertBefore(nd);
                //$("#c")[0].innerHTML = result.text;
Idealy, I guess I want to statically generate all the necessary scripts and one instance of each control that I need 
and then clone them dynamically with javascript as needed.

Is there a way to this? Is there a javascript telerik.ui.raddatepicker constructor?
You guys must have a way since there is a client side radgrid insert row

Thank you very much

Louis

1 Answer, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 21 Feb 2011, 10:23 AM
Hello Louis,

Our controls have not been designed for such an initialization approach and are not guaranteed to work in this case. Still, if you need to render the control HTML through a web service, you can initialize a client component for it. You do not need the client component constructor, but a call to MS AJAX framework's Sys.Component.create method (or its alias $create). The format of the method call for initializing a component is different for every control. The easiest way to identify the signature of the $create method for each control is to define the control statically on the page, run the page and observe the rendered HTML and the accompanying $create method call for that control.

Cloning a control is essentially the same as recreating it. You need to clone the HTML structure of the control into a new container and then initialize the client component again with $create. Mind the control ID here. The cloned control ID should match the DOM container element's id attribute and that needs to be unique on the page.

Veli
the Telerik team
Tags
Input
Asked by
Louis
Top achievements
Rank 1
Answers by
Veli
Telerik team
Share this question
or