Telerik Extensions for ASP.NET MVC

Version Q2 2012, released 06/07/2012

Client-side Events

Open the calendar
Open the time view
Open the calendarOpen the time view

Event log

Clear log

About this example ASPXRazor

This example shows the client-side events supported by Telerik DatePicker for ASP.NET MVC.

The datepicker has the following events:

  • The OnLoad event is raised when the component is initialized. You can subscribe to that event by using one of the two overloads of the OnLoad method. The one accepts Action as an argument - the other accepts a String. Use the Action overload to define the event handler inline. Use the String overload to specify the name of the JavaScript function which handles the event. The following code shows both options:
    <%= Html.Telerik().DatePicker()
            .Name("DatePicker")
            .ClientEvents(events => events
                .OnLoad("onLoad")
            )
    
    or
    <% Html.Telerik().DatePicker()
           .Name("DatePicker")
           .ClientEvents(events => events
           .OnLoad(() => 
           {
            %>
             function(e) {
                 //perform required actions here.
             }
            <%
           })
           .Render();
    
  • The OnChange event is raised when the currently selected date is changed. You can subscribe to that event by using one of the two overloads of the OnChange method:
    <%= Html.Telerik().DatePicker()
            .Name("DatePicker")
            .ClientEvents(events => events
                .OnChange("onChange")
            )
    
    or
    <% Html.Telerik().DatePicker()
           .Name("DatePicker")
           .ClientEvents(events => events
           .OnChange(() => 
           {
               %>
                function(e) {
                    //perform required actions here.
                }
               <%
           })
           .Render();
    
  • The OnOpen event is raised when date view drop-down is opened. You can subscribe to that event by using one of the two overloads of the OnCollapse method:
    <%= Html.Telerik().DatePicker()
            .Name("DatePicker")
            .ClientEvents(events => events
                .OnOpen("onOpen")
            )
    
    or
    <% Html.Telerik().DatePicker()
           .Name("DatePicker")
           .ClientEvents(events => events
           .OnOpen(() => 
           {
               %>
                function(e) {
                    //perform required actions here.
                }
               <%
           })
           .Render();
    
  • The OnClose event is raised when date view drop-down is closed. You can subscribe to that event by using one of the two overloads of the OnClose method:
    <%= Html.Telerik().DatePicker()
            .Name("DatePicker")
            .ClientEvents(events => events
                .OnClose("onClose")
            )
    
    or
    <% Html.Telerik().DatePicker()
           .Name("DatePicker")
           .ClientEvents(events => events
           .OnClose(() => 
           {
               %>
                function(e) {
                    //perform required actions here.
                }
               <%
           })
           .Render();
    

Interested in HTML5 and mobile-powered ASP.NET MVC apps?

Experience the next generation UI and framework for ASP.NET MVC development by downloading trial evaluation copy of Kendo UI Complete for ASP.NET MVC. Jumpstart your development with the available learning resources.

The differences between Telerik MVC Extensions and Kendo UI Complete for ASP.NET MVC, and their licensing models are explained here and here.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Other Demos: