Render RadDatePicker using PageMethods

[Jocelyn]

Hi,

I want to use a RadDatePicker clientside that I add dynamically to my page using a PageMethods.

I was wondering if it is possible to achieve this. I don't want to do any postback with it, so I don't care about the server code, I only want to use it client side.

I want to do something like this:

<telerik:RadButton runat="server" ID="btnTest" Text="test" AutoPostBack="false" OnClientClicked="click">
    </telerik:RadButton>
    <div id="divTest"></div>

VB

<System.Web.Services.WebMethod()> _
Public Shared Function AddDatePicker() As String
    Dim sw As New StringWriter()
    Dim writer As New HtmlTextWriter(sw)
    Dim rdp As New RadDatePicker()
    rdp.RenderControl(writer)

    Return sw.ToString()
End Function

JS

<script type="text/javascript">
    function click(sender, args) {
        PageMethods.Test(
            function(response) {
                $("#divTest").html(response);
            },
            function(error) {
                alert(error);
            });
    }
</script>

And then be able to use the value and client side events.

Thanks!

[Vasil]

Hello Jocelyn,

Normally during the Callback your ScriptManager will register the scripts need for all controls that are visible on the page to work.
In your case you will need to include the scripts manually:
http://www.telerik.com/help/aspnet-ajax/introduction-disabling-embedded-resources.html
(You don't need to include them, if there is already such date picker on the page during the first load.)

The rendered HTML is required, but still not enough to get fully workable control. You will need to create the client side object of the picker.
Here is the example script that you can use for creating the picker:

$create(Telerik.Web.UI.RadDatePicker, {"_PopupButtonSettings":{ ResolvedImageUrl : "", ResolvedHoverImageUrl : ""},"_animationSettings":{ShowAnimationDuration:300,ShowAnimationType:1,HideAnimationDuration:300,HideAnimationType:1},"_popupControlID":"RadDatePicker1_popupButton","clientStateFieldID":"RadDatePicker1_ClientState","focusedDate":"2013-07-02-00-00-00"}, null, {"calendar":"RadDatePicker1_calendar","dateInput":"RadDatePicker1_dateInput"}, $get("RadDatePicker1"));

Where "RadDatePicker1" is the ID of the control.

You can create a sample web page with only a picker on it, and to inspect the output HTML to see how it is working.
This MSDN article explains how to create custom client side objects.
http://msdn.microsoft.com/en-us/library/bb398906%28v=vs.100%29.aspx

My suggestion will be to add the picker normaly in your page, and set it's ViewState="false" if you will not be using it server side. You can wrap it inside div with display:none style, and show it when you need to without calling the WebMethod.

I hope this helps.

Regards,
Vasil
Telerik

[Jocelyn]

Hi Vasil,

I can't only add the RadDatePicker in the aspx and hide it, because I add more than one picker from a ComboBox value.

I can't figure out how to add the control using RenderControl because I got a "Page cannot be null" error. I tried to create a temporary page and added the RadDataPicker in page before calling RenderControl, but I still got the same error.

So how can I get the rendered DatePicket HTML from my PageMethod?

Thanks.

[Vasil]

Hi Jocelyn,

Indeed, you can not render the control if you don't have a Page. As workaround you can actually render the control into sample page outside your project, then inspect the output HTML using browser developer tools, and to hard-code the same HTML into your project. To minimise the code, you can use a SharedCalendar in your page.

Anyway, even if it is possible in theory I would not recommend such approach to anyone. We have designed this controls as server controls that to work on ASP page with normal post backs and Ajax calls. The web services should be used only for transferring data, not rendered HTML.

Regards,
Vasil
Telerik

[Jocelyn]

Hi Vasil

thanks for you answers! I will try to find a workaround to use a time picker client-side like a DatePicker in jquery with a plugin or something else.

Thank you very much for your help!