Issues with DateTimePicker control

4 posts, 1 answers
  1. Vivek
    Vivek avatar
    16 posts
    Member since:
    Apr 2011

    Posted 23 Apr 2012 Link to this post

    Hi,

    I am trying to build a functionality in my asp.net page where when a user changes the values of any controls on the page and then if they try to navigate away without saving their changes, it would display a pop up message. The pop up message would confirm that if they navigate away their changes will be discarded. But i am unable to do that so for the raddatetimepicker control as i cannot find a function that would fire after it's value is changed from the current value that is populated from the database? e.g. after the page loads, if datetimepicker control has a value of 23 April 2010 and then the user changes that value, i need to fire a function preferably a client side function that would set the changed value flag to one and then i can notify the user that they have unsaved changes on the page.could you please help? i have used this function "datePicker.ClientEvents.OnDateSelected = "SetUnsavedDataFlag('1');"" but it does not fire.
  2. Richard Weeks
    Richard Weeks avatar
    95 posts
    Member since:
    Oct 2009

    Posted 24 Apr 2012 Link to this post

    Hello, the following code shows JavaScript method being called by the OnDateSelected client event of the DateTimePicker of the RadCalendar control.

    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Test</title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
            //<![CDATA[
                function Calendar_OnDateSelected(calendarInstance, args) {
                    RunMethod();
                };
                 
                function RunMethod() {
                    alert('Triggered');
                }
            //]]>
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
     
        <telerik:RadCalendar ID="RadCalendar1" runat="server">
            <ClientEvents
                OnDateSelected="Calendar_OnDateSelected">
            </ClientEvents>
        </telerik:RadCalendar>
     
        </form>
    </body>
    </html>

    Regards,
    Richard
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vivek
    Vivek avatar
    16 posts
    Member since:
    Apr 2011

    Posted 24 Apr 2012 Link to this post

    I am not using the RadCalendar control. This is what i am doing.

      <telerik:raddatetimepicker id="rdpLogDate" runat="server" showpopuponfocus="true"
                    dateinput-dateformat="dd MMM yyyy hh:mm tt" width="48%" >
                    </telerik:raddatetimepicker>

    once this control is initialised with a date, then i run a VB.NET Function that looks like this

     For Each ctlControl As System.Web.UI.WebControls.WebControl In Controls
                If TypeOf ctlControl Is CheckBox Or _
                   TypeOf ctlControl Is RadioButton Or _
                   TypeOf ctlControl Is Button Then
                    ctlControl.Attributes.Add("OnClick", "SetUnsavedDataFlag('1');")
                ElseIf TypeOf ctlControl Is Telerik.Web.UI.RadDateTimePicker Then
                    Dim datePicker As Telerik.Web.UI.RadDateTimePicker
                    datePicker = CType(ctlControl, Telerik.Web.UI.RadDateTimePicker)
                    datePicker.ClientEvents.OnDateSelected = "SetUnsavedDataFlag('1');"
                Else
                    ctlControl.Attributes.Add("OnChange", "SetUnsavedDataFlag('1');")
                    ctlControl.Attributes.Add("OnFocus", "SetFocusedField(this);")
                End If
            Next

    and then i expect when the date is selected from this control, it would fire the datePicker.ClientEvents.OnDataSelected but it does not. Any solution please?

    Thanks for reply to my question though.
  5. Answer
    Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 25 Apr 2012 Link to this post

    Hello Vivek,

    I have assembled a sample project demonstrating the desired functionality. Your issue is caused because RadControls client-side events work differently. You should only pass the name of the function without calling it. When the event is fired we call the function specified with two parameters. The first is the sender which is the control from which the event is invoked and the second is the event arguments associated with the event.
    For Each control As Control In Page.Form.Controls
        Dim ctlControl As WebControl
        If TypeOf control Is WebControl Then
            ctlControl = TryCast(control, WebControl)
        Else
            Continue For
        End If
        If TypeOf ctlControl Is CheckBox Or _
            TypeOf ctlControl Is RadioButton Or _
            TypeOf ctlControl Is Button Then
            ctlControl.Attributes.Add("OnClick", "SetUnsavedDataFlag('1');")
        ElseIf TypeOf ctlControl Is Telerik.Web.UI.RadDateTimePicker Then
            Dim datePicker As Telerik.Web.UI.RadDateTimePicker
            datePicker = CType(ctlControl, Telerik.Web.UI.RadDateTimePicker)
            datePicker.ClientEvents.OnDateSelected = "SetUnsavedDataFlag"
        Else
            ctlControl.Attributes.Add("OnChange", "SetUnsavedDataFlag('1');")
            ctlControl.Attributes.Add("OnFocus", "SetFocusedField(this);")
        End If
    Next

    Kind regards,
    Antonio Stoilkov
    the Telerik team
    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 their blog feed now.
Back to Top