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.
<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
Only the <div id="A">Item A content</div>
element is treated as a content for the Drawer
The passed content should be wrapped in a container