Progress® Telerik® UI for ASP.NET Core Feedback Portal

Unplanned

Last Updated: 30 Aug 2024 11:03 by Petr

Drawer Multi-Level Hierarchy

Created by: Petr

Comments: 0

Category: Drawer

Type: Feature Request

Drawer Multi-Level Hierarchy

Currently, the Drawer Hierarchy demo shows how to create two levels of hierarchy. Is it possible to enhance the Drawer to allow multiple nested items?

For example, the following KB article describes how to implement multi-level hierarchy, but the suggested approach requires custom JavaScript logic:

https://docs.telerik.com/kendo-ui/knowledge-base/drawer-multi-level-hierarchy

Unplanned

Last Updated: 19 Oct 2022 12:23 by ADMIN

Please add an ExpandOnOpen setting to the Drawer TagHelper

Created by: Laurie

Comments: 5

Category: Drawer

Type: Feature Request

Please add an ExpandOnOpen setting to the Drawer TagHelper

I'm trying to use it for navigation in a section using Razor Pages. Having to expand using javascript is very distracting when the user goes from page to page. Below is the code to create a self-running page that demonstrates the issue:

@page
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TestDrawer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css" />

    @* FontAwesome Pro css*@
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-xVVam1KS4+Qt2OrFa+VdRUoXygyKIuNWUUUBZYv+n27STsJ7oDOHJgfF0bNKLMJF" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
    </script>
    @* Place Kendo UI scripts after jQuery *@
    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"
            asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
            asp-fallback-test="window.kendo">
    </script>
    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.aspnetmvc.min.js"
            asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
            asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <style>
        /* Root navigation */
        #root-nav li,
        #example-nav li {
            list-style: none;
        }

        .root-nav-categories h3,
        #example-nav h3 {
            color: #000;
            font-size: 14px;
            line-height: 14px;
            padding: 0.5em 0 0.5em 3.571em;
            text-transform: uppercase;
        }

        #example-nav h3 {
            padding: 1.7em 0 0.5em 3.4em;
        }

        #example-nav-bar {
            border-top: 1px solid #e2e4e7;
        }


        #back-forward {
            display: block;
            position: relative;
            color: #000;
            font-size: 14px;
            line-height: 15px;
            font-weight: normal;
            padding: 1em 3.5em;
            /*vertical-align: middle;*/
        }

        #root-nav h4 a {
            text-align: right;
        }

        .back-nav {
            text-align: left;
        }

            .back-nav:before {
                position: absolute;
                top: 1em;
                left: 1.2em;
            }

        .forward-nav {
            text-align: left;
        }

            .forward-nav:before {
                position: absolute;
                display: block;
                top: 1em;
                right: 1.2em;
                width: 14px;
                height: 14px;
                -ms-transform: rotate(180deg); /* IE 9 */
                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
                transform: rotate(180deg);
            }

        .root-nav-categories {
            margin-top: 1.417em;
        }

        #root-nav,
        #example-nav {
            padding-bottom: 30px;
        }

            #root-nav li a,
            #example-nav li a {
                /*controls customer navigation icon and text size*/
                /*font-size: 13px;*/
                /*line-height: 13px;*/
                color: #2d3e50;
                display: block;
                padding: 0.5em 0 0.5em .5em;
                transition: all .2s ease;
            }

            #example-nav li .group {
                font-size: 13px;
                font-weight: bold;
                line-height: 13px;
                color: #2d3e50;
                display: block;
                padding: 1.5em 0 0.25em 3.7em;
                transition: all .2s ease;
            }

        .flip {
            transform: rotate( -180deg );
            transition: transform 500ms ease;
        }

        .no-boarder {
            border: none;
        }

        .k-drawer-container {
            border: none;
        }

        /*Adjusts width of icon blocks in customer navigation*/
        .k-drawer-wrapper.k-drawer-mini-mode .k-drawer-items {
            width: 3.5rem;
        }

        #root-nav li a:hover,
        #example-nav li a:hover,
        #back-forward:hover {
            color: #000;
            text-decoration: none;
            background-color: #e2e4e7;
        }

        .k-hover-enabled #root-nav li a:hover,
        .k-hover-enabled #example-nav li a:hover {
            background-color: transparent;
        }

        #example-nav .active {
            background-color: #e2e4e7;
            cursor: default;
        }
    </style>
    @*<link rel="stylesheet" href="~/css/site.css" />*@
</head>
<body>
    <div id="example-sidebar" class="border border-secondary">
        @*<div id="nav-wrapper">*@
        <div id="nav">
            <div id="example-nav">
                <kendo-drawer name="drawer" mode="push" on-hide="onHide" min position="left" swipe-to-open="true" template-id="template" class="no-boarder">
                    <mini enabled="true" />
                </kendo-drawer>
            </div>
        </div>
        @*NAVIGATION STACK*@
        @*<a href="#">
                <span class="fa-stack" style="vertical-align: top;">
                    <i class="far fa-circle fa-stack-2x"></i>
                    <i class="far fa-exchange fa-stack-1x"></i>
                </span>
            </a>*@


        <a href="javascript:void(0);" onclick="toggleDrawer();" id="expand" title="Toggle Navigation">
            <span class="fa-stack mb-2 ml-2">
                <i class="far fa-circle fa-stack-2x"></i>
                <i class="far fa-exchange fa-stack-1x"></i>
            </span>
        </a>
        <script>
            function getCookie(cname) {
                var name = cname + "=";
                var decodedCookie = decodeURIComponent(document.cookie);
                var ca = decodedCookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            }

            $(document).ready(function () {

                var drawerInstance = $("#drawer").data().kendoDrawer;
                var hideMenu = getCookie("HideCustomerMenu");
                if (hideMenu == 'true') {
                    var arrowButton = $("#expand");
                    arrowButton.toggleClass('flip');
                }
                else {
                    drawerInstance.show();
                }

            });

            function toggleDrawer() {
                var drawerInstance = $("#drawer").data().kendoDrawer;
                var drawerContainer = drawerInstance.drawerContainer;
                var arrowButton = $("#expand");

                if (drawerContainer.hasClass("k-drawer-expanded")) {
                    document.cookie = "HideCustomerMenu=true";
                    arrowButton.toggleClass('flip');
                    drawerInstance.hide();
                } else {
                    document.cookie = "HideCustomerMenu=false";
                    arrowButton.toggleClass('flip');
                    drawerInstance.show();
                }


            }
        </script>
        <script id="template" type="text/x-kendo-template">
            <ul class="menuBar list-unstyled">
                <li id="test1"><a href="testdrawer"><i class="fa fa-user-circle fa-2x fa-fw mr-2" aria-hidden="true" title="Page 1"></i>Page 1</a></li>
                <li id="test2"><a href="testdrawer" class="customer"><i class="fa fa-check fa-2x fa-fw mr-2" aria-hidden="true" title="Page 2"></i>Page 2</a></li>
                <li id="test3"><a href="testdrawer" class="customer"><i class="fa fa-random fa-2x fa-fw mr-2" aria-hidden="true" title="Page 3"></i>Page 3</a></li>
                <li id="test4"><a href="testdrawer" class="customer"><i class="fa fa-dollar-sign fa-2x fa-fw mr-2" aria-hidden="true" title="Page 4"></i>Page 4</a></li>
                <li id="test5"><a href="testdrawer" class="customer"><i class="fa fa-paperclip fa-2x fa-fw fa-rotate-90 fa-flip-horizontal mr-2" aria-hidden="true" title="Page 5"></i>Page 5</a></li>
            </ul>
        </script>
    </div>
    <script>
        function onHide(e) {
            e.preventDefault();
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
    </script>
</body>
</html>

Completed

Last Updated: 19 Jul 2022 07:53 by ADMIN

Release 2022.R2.SP.next

The Content method of the Drawer, when in overlay mode, adds a k-drawer-content class to the first element of the passed content, but not to the entire content

Created by: Kalyani

Comments: 0

Category: Drawer

Type: Bug Report

The Content method of the Drawer, when in overlay mode, adds a k-drawer-content class to the first element of the passed content, but not to the entire content

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

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]