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

Issues with DateTimePicker control

3 Answers 136 Views

General Discussions

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

Vivek asked on 23 Apr 2012, 06:14 AM

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.

3 Answers, 1 is accepted

answered on 24 Apr 2012, 07:23 AM

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

answered on 24 Apr 2012, 07:34 AM

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.

Accepted

answered on 25 Apr 2012, 02:35 PM

IssueWithDateTimePicker.zip

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Issues with DateTimePicker control

3 Answers, 1 is accepted