Completed
Last Updated: 19 Jul 2022 07:53 by ADMIN
Release 2022.R2.SP.next

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>
@(Html.Kendo().Drawer()
        .Name("drawer")
        .Template(@"
            <ul>
                <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>
             </ul>
            ")
        .Mode("overlay")
        .Position("left")
        .SwipeToOpen(true)
        .Content(@<text>
                <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>
            </text>)
        .Events(x => x.ItemClick("onItemClick")))

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

    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");
    }
</script>
<style>
    .hidden {
        display: none;
    }

</style>

Sample application:
TelerikAspNetCoreApp226.zip

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

Environment

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