Show Drawer on Initial Load

Updated on Dec 10, 2025

Environment

Product

Progress® Kendo UI® Drawer for jQuery

Description

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

Solution

The following example demonstrates how to achieve the desired scenario.

Example

View Source

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

        <div id="drawer">
        </div>

      </div>
      <script>
        $(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){
            e.preventDefault();
          }
        }).data().kendoDrawer;

        drawer.show();

        $("#hide").click(function (e) {
          $("#drawer").data().kendoDrawer.hide();
        });
        });
      </script>
      <style>
        .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;
        }
      </style>
    </div>