Dynamic javascript control creation/cloning

2 posts, 0 answers
  1. Louis
    Louis avatar
    3 posts
    Member since:
    Nov 2007

    Posted 18 Feb 2011 Link to this post

    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
  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 21 Feb 2011 Link to this post

    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
Back to Top