Configuration

This section describes options that configure the Drawer widget's contents, behavior and appearance.

See Also

activeStateEnabled

Specifies whether or not the widget changes its state when interacting with a user.

Type:

Boolean

Default Value: false

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

animationDuration

Specifies the duration of the drawer's opening and closing animation (in milliseconds). Applies only if animationEnabled is true.

Type:

Number

Default Value: 400

animationEnabled

Specifies whether to use an opening and closing animation.

Type:

Boolean

Default Value: true

closeOnOutsideClick

Specifies whether to close the drawer if a user clicks or taps the view area.

Type:

Boolean

|

Function

Function parameters:
event:

Event (jQuery or dxEvent)

The raised event. It is a dxEvent or a jQuery.Event when you use jQuery.

Return Value:

Boolean

true if the widget should be closed; otherwise false.

Default Value: false

The function passed to this option enables you to specify a custom condition for widget closing. For instance, you can prevent closing until a user clicks a specific element on the view:

jQuery
JavaScript
$(function() {
    $("#drawerContainer").dxDrawer({
        // ...
        closeOnOutsideClick: function(e) {
            return e.target === $("#someElement").get()[0];
        }
    });
});
Angular
TypeScript
HTML
import { DxDrawerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    drawer_closeOnOutsideClick(e) {
        return e.target === document.getElementById("someElement");
    }
}
@NgModule({
     imports: [
         // ...
         DxDrawerModule
     ],
     // ...
 })
<dx-drawer ...
    (closeOnOutsideClick)="drawer_closeOnOutsideClick($event)">
</dx-drawer>

disabled

Specifies whether the widget responds to user interaction.

Type:

Boolean

Default Value: false

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type:

Object

Default Value: {}
jQuery
$(function(){
    $("#drawerContainer").dxDrawer({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-drawer ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-drawer>
import { DxDrawerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDrawerModule
    ],
    // ...
})
ASP.NET MVC Control
Razor C#
Razor VB
@(Html.DevExtreme().Drawer()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)
@(Html.DevExtreme().Drawer() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

height

Specifies the view's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's height.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The height in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    height: function() {
        return window.innerHeight / 1.5;
    }

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type:

String

Default Value: undefined

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

Type:

Boolean

Default Value: false

maxSize

Specifies the drawer's width or height (depending on the drawer's position) in the opened state.

Type:

Number

Default Value: null
See Also

minSize

Specifies the drawer's width or height (depending on the drawer's position) in the closed state.

Type:

Number

Default Value: null
See Also

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Drawer

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model:

Object

The model data. Available only if you use Knockout.

Default Value: null

onInitialized

A function that is executed only once, after the widget is initialized.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Drawer

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

You cannot access widget elements in this function because it is executed before they are ready.

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Drawer

The widget's instance.

name:

String

The option's short name.

fullName:

String

The option's full name.

value: any

The option's new value.

element:

Element (jQuery or HTML)

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model:

Object

The model data. Available only if you use Knockout.

Default Value: null

opened

Specifies whether the drawer is opened.

Type:

Boolean

Default Value: false

openedStateMode

Specifies how the drawer interacts with the view in the opened state.

Type:

String

Default Value: 'shrink'
Accepted Values: 'overlap' | 'shrink' | 'push'

The following modes are available:

  • "overlap"
    The drawer overlaps the view.

  • "shrink"
    The view's width decreases to accommodate the drawer.

  • "push"
    The drawer partially displaces the view.

View Demo Use the DrawerOpenedStateMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Overlap, Shrink, and Push.

See Also

position

Specifies the drawer's position in relation to the view.

Type:

String

Default Value: 'left'
Accepted Values: 'left' | 'right' | 'top' | 'bottom'

Vertical Opening Demo Horizontal Opening Demo

Use the DrawerPosition enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Left, Right, Top, and Bottom.

revealMode

Specifies the drawer's reveal mode.

Type:

String

Default Value: 'slide'
Accepted Values: 'slide' | 'expand'

The following modes are available:

  • "slide"
    The drawer slides in. The drawer and its content are animated.

  • "expand"
    The drawer expands from the closed position. The drawer's width is animated; its content is not.

View Demo

Use the DrawerRevealMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Slide and Expand.

See Also

rtlEnabled

Switches the widget to a right-to-left representation.

Type:

Boolean

Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});
See Also

shading

Specifies whether to shade the view when the drawer is opened.

Type:

Boolean

Default Value: false
See Also

target

Specifies the target element associated with the drawer. Applies only when the openedStateMode is "overlap".

Type:

String

|

DOM Node

|

jQuery

This option accepts one of the following values.

  • A CSS selector, or a jQuery selector if you use jQuery

    target: '#targetElement';
  • A jQuery wrapper

    target: $('#targetElement');
  • A DOM element

    target: document.getElementById('#targetElement');
See Also

template

Specifies the drawer's content.

Type:

template

Function parameters:
Element:

Element (jQuery or HTML)

The container for the content. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null
See Also

visible

Specifies whether the Drawer widget (including the view) is visible.

Type:

Boolean

Default Value: true

width

Specifies the view's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The width in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    width: function() {
        return window.innerWidth / 1.5;
    }