Render RadDatePicker using PageMethods

5 posts, 1 answers
  1. Jocelyn
    Jocelyn avatar
    148 posts
    Member since:
    Jul 2012

    Posted 27 Jun 2013 Link to this post

    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!
  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 02 Jul 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jocelyn
    Jocelyn avatar
    148 posts
    Member since:
    Jul 2012

    Posted 02 Jul 2013 Link to this post

    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.
  5. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 04 Jul 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Jocelyn
    Jocelyn avatar
    148 posts
    Member since:
    Jul 2012

    Posted 04 Jul 2013 Link to this post

    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!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017