New to Telerik UI for ASP.NET AJAX? Download free 30-day trial


This article lists the client-side events of the RadStepper and how to use them.

All events follow the MS AJAX client events convention and receive two arguments:

  1. sender - the RadStepper instance that raised the event.
  2. event arguments - event-specific data provided to the developer.

RadStepper is a wrapper over the Kendo UI Stepper widget and so it exposes the client events and data it does. You can find a list below.

The event data is wrapped according to the MS AJAX conventions and the fields you can see in the underlying Kendo Widget are available through a method like get_<fieldName>() in the event arguments argument of the handler (that is, the second argument the event handler receives). To cancel a cancelable event, you must call its args.set_cancel(true); method.

The exceptions are the OnInitialize and OnLoad events that are specific to the MS AJAX framework.

Listing 1: The client-side events exposed by RadStepper

  • OnInitialize — Fired just before the RadStepper client-side object is initialized.

  • OnLoad — Fired when RadStepper is initialized and loaded on the page.

  • OnStepSelected — Fires when the user clicks on a Step to select it. (Cancelable event)

  • OnStepSelecting — Fires when a new Step has been selected upon user interaction.


Example 1: Store a reference to the client-side object through the OnLoad event

    var stepper, kendoStepper;
    function OnLoad(sender, args) {
        stepper = sender; //the RadStepper
        kendoStepper = sender.get_kendoWidget(); //the underlying Kendo Stepper widget
<telerik:RadStepper runat="server" ID="RadStepper1">
    <ClientEvents OnLoad="OnLoad" />

Example 2: Get the data associated with the activated Step

    function onStepSelecting(sender, args) {
        //kendo object of the activated step 
        var step = args.get_step()
        //client side object of the step properties
        var stepProperties = step.options;

        //access the desired step options
        var labelText = stepProperties.label;
        var iconName = stepProperties.icon;
        var successIconName = stepProperties.successIcon;
        var enabled = stepProperties.enabled;
        var error = stepProperties.error;
<telerik:RadStepper runat="server" ID="RadStepper1">
    <ClientEvents OnStepSelecting="onStepSelecting" />
        <telerik:StepperStep Label ="Step 1"/>
        <telerik:StepperStep Label ="Step 2"/>
        <telerik:StepperStep Label ="Step 3"/>

See Also

In this article