New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Events Overview

The ASP NET AJAX Calendar controls support a number of client-side events that let you respond to user actions without a postback. The following table lists the various client events, and which controls they apply to:

EventDescription
OnInitOccurs when the calendar setup is finalized (at the end of the calendar constructor).
OnLoadOccurs when a page is loaded on the client.
OnDayRenderOccurs immediately before acalendar day cell is displayed when the calendar is rendered as a result of client-side navigation.
OnDateSelectingOccurs immediately before the selected dates collection is updated to reflect the selection or de-selection of a date.
OnDateSelectedOccurs immediately after the value of the control's selection has been changed.
OnDateClickOccurs when the user clicks on a date in the calendar (regardless of whether the date can be selected).
OnCalendarViewChangingOccurs when the calendar navigates to a new view, before the viewable area rendered by the calendar is changed.
OnCalendarViewChangedOccurs immediately after the calendar navigates to a new view.
OnColumnHeaderClickOccurs when the user clicks on a column header.
OnRowHeaderClickOccurs when the user clicks on a row header.
OnViewSelectorClickOccurs when the user clicks on the view selector.

To use these events, simply write a JavaScript function that can be called when the event occurs. Then assign the name of the JavaScript function as the value of the the corresponding property.

ASPNET
<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" runat="server">
    <TimeView OnClientTimeSelected="clientTimeSelected"></TimeView>
</telerik:RadTimePicker>

You can also assign event handlers in client-side code. When using the client-side API, pass a reference to the event handler rather than its name. One advantage of using the client-side API is that you can attach multiple event handlers to one event using the standard MS AJAX convention:

JavaScript
function onDateClickHandler1()
{
    alert("First handler called");
}
function onDateClickHandler2()
{
    alert("Second handler called");
}
function pageLoad()
{
    var calendar = $find(<%=RadCalendar1.ClientID%>);
    calendar.add_dateClick(onDateClickHandler1);
    calendar.add_dateClick(onDateClickHandler2);
}	

Another advantage of the client-side API is that you can detach an event handler dynamically:

JavaScript
function removeDateClick2()
{
    var calendar= $find(<%=RadCalendar1.ClientID%>);
    calendar.remove_dateClick(onDateClickHandler2);
}		

Note that on the client-side, the names of events are slightly different than on the server side. The following table shows the correspondence between client-side and server-side names:

Server-Side NameClient-SideNameMethods to add and Remove
OnInitinitadd_init, remove_init
OnLoadloadadd_load, remove_load
OnDayRenderdayRenderadd_dayRender, remove_dayRender
OnDateSelectingdateSelectingadd_dateSelecting, remove_dateSelecting
OnDateSelecteddateSelectedadd_dateSelected, remove_dateSelected
OnDateClickdateClickadd_dateClick, remove_dateClick
OnCalendarViewChangingcalendarViewChangingadd_calendarViewChanging, remove_calendarViewChanging
OnCalendarViewChangedcalendarViewChangedadd_calendarViewChanged, remove_calendarViewChanged
OnColumnHeaderClickcolumnHeaderClickadd_columnHeaderClick, remove_columnHeaderClick
OnRowHeaderClickrowHeaderClickadd_rowHeaderClick, remove_rowHeaderClick
OnViewSelectorClickviewSelectorClickadd_viewSelectorClick, remove_viewSelectorClick
OnPopupOpeningpopupOpeningadd_popupOpening, remove_popupOpening
OnPopupClosingpopupClosingadd_popupClosing, remove_popupClosing
OnClientTimeSelectingclientTimeSelectingadd_clientTimeSelecting, remove_clientTimeSelecting
OnClientTimeSelectedclientTimeSelectedadd_clientTimeSelected, remove_clientTimeSelected

See Also

In this article
See Also
Not finding the help you need?
Contact Support