Last Updated: 19 Jul 2022 07:53 by ADMIN

Bug report

The Drawer, when in overlay mode, adds a k-drawer-content class to the first element of the passed content, but does not wrap the content in a container element, leading to incorrect rendering.

Reproduction of the problem

  1. Define a Drawer the following way:
<button id='show'>Show</button>
                <li data-role='drawer-item'  class='k-state-selected'><span></span><span class='k-item-text'>A</span></li>
                <li data-role='drawer-item'><span></span><span class='k-item-text'>B</span></li>
                <li data-role='drawer-item'><span></span><span class='k-item-text'>C</span></li>
                <div id="A">Item A content</div>
                <div id="B" class='hidden'>Item B content</div>
                <div id="C" class='hidden'>Item C content</div>
        .Events(x => x.ItemClick("onItemClick")))

    $('#show').click(function () {
        var drawerInstance = $("#drawer").getKendoDrawer();

    function onItemClick(e) {
        $('body').find('.k-drawer-content > div').addClass("hidden");
        $('body').find('.k-drawer-content').find("#" + e.item.find(".k-item-text").text()).removeClass("hidden");
    .hidden {
        display: none;


Sample application:

Current behavior

Only the <div id="A">Item A content</div> element is treated as a content for the Drawer

Expected/desired behavior

The passed content should be wrapped in a container


  • Kendo UI version: 2021.2.511
  • Browser: [all]