New to Kendo UI for jQuery? Download free 30-day trial

Show Drawer on Initial Load


Product Progress® Kendo UI® Drawer for jQuery


Some scenarios might require you to initially show the Kendo UI for jQuery Drawer.


The following example demonstrates how to achieve the desired scenario.

    <div id="example">
      <div class="demo-section k-content">

        <div id="drawer">

        $(document).ready(function () {
          var drawer = $("#drawer").kendoDrawer({
            template: "<ul> \
<li data-role='drawer-item'><span class='k-item-text'>First Item</span></li> \
<li data-role='drawer-separator'></li> \
<li data-role='drawer-item'><span class='k-item-text'>Second Item</span></li> \
<li data-role='drawer-item' class='k-selected'><span class='k-item-text'>Third Item</span></li> \
<li data-role='drawer-separator'></li> \
<li data-role='drawer-item'><span class='k-item-text'>Last Item</span></li> \
        </ul><button id='hide' class='k-button'>Hide</button>",
            position: 'left',
            swipeToOpen: false,
            hide: function(e){

        $("#hide").click(function (e) {
        .fieldlist {
          margin: 0 0 -1em;
          padding: 0;

        .fieldlist li {
          list-style: none;
          padding-bottom: 1em;

        #overlay-drawer {
          border: 0;

        .k-drawer-content {
          padding: 1em;

        #example .demo-section {
          max-width: 640px;

In this article