Events Overview

This article lists the clients-side events of the RadDrawer and how to use them.

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

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

RadDrawer is a wrapper over the Kendo UI Drawer 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 avaliable 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 an 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 RadDrawer

• OnShow—Fires before the RadDrawer is revealed. Cancellable.

• OnHide—Fired when the RadDrawer is about to be hidden. Cancellable.

• OnItemClick—Fires when user clicks on item from the RadDrawer. Not cancellable. The arguments have the get_item() and get_text() methods.

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

• OnLoad—Fired when RadDrawer is initialized.

Examples

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

<script>
    var drawer, kendoDrawer;
    function OnLoad(sender, args) {
        drawer = sender; //the RadDrawer
        kendoDrawer = sender.get_kendoWidget(); //the underlying Kendo Drawer
    }
</script>
<telerik:RadDrawer runat="server" ID="RadDrawer">
    <ClientEvents OnLoad="OnLoad" />
</telerik:RadDrawer>

Example 2: Get the data associated with the clicked item

<script>
    function OnItemClick(sender, args) {
        // a jQuery object of the clicked item 
        var $itemElement = args.get_item();
        // the text of the element with class .k-item-text element inside the clicked item
        var itemText = args.get_text();
        console.log(itemText);
    }
</script>
<telerik:RadDrawer runat="server" ID="RadDrawer1" DrawerWidth="200" SwipeToOpen="true">
    <ClientEvents  OnItemClick="OnItemClick" />
    <ItemsTemplate>
        <ul> 
            <li data-role='drawer-item' class='k-state-selected'>
                <span class='k-item-text'>First Item</span>
            </li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Second Item</span>
            </li> 
            <li data-role='drawer-separator'></li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Third Item</span>
            </li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Fourth Item</span>
            </li> 
        </ul>
    </ItemsTemplate>
</telerik:RadDrawer>

Example 3: Cancel an event

<script>
    function OnShow(sender, args) {
        var shouldCancel = true;//use actual business logic
        args.set_cancel(shouldCancel);//cancel the event
        //in this example, the drawer will never show
    }
</script>
<telerik:RadDrawer runat="server" ID="RadDrawer1" DrawerWidth="200" SwipeToOpen="true">
    <ClientEvents OnShow="OnShow" />
    <ItemsTemplate>
        <ul> 
            <li data-role='drawer-item' class='k-state-selected'>
                <span class='k-item-text'>First Item</span>
            </li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Second Item</span>
            </li> 
            <li data-role='drawer-separator'></li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Third Item</span>
            </li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Fourth Item</span>
            </li> 
        </ul>
    </ItemsTemplate>
</telerik:RadDrawer>

See Also

• RadDrawer Client-side Object