Show Drawer on Initial Load

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.

    <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>