Questions on Kendo UI for jQuery Forum

0 answers

64 views

I am seeing an issue with the Kendo Responsive Panel component. There is a Kendo Menu inside the responsive panel, but when displaying the horizontal menu its showing horizontal and vertical scroll bars when hovering over the menu item that says Foo, and also its not showing the menu group item since the height of the responsive panel is limited to the initial height of the horiontal menu. I am using Kendo UI jQuery R2 2020. The code I have is as given below. The dojo sample can be seen at https://dojo.telerik.com/@sun21170/uPisoRoW

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Kendo UI Responsive Panel is scrolling for a menu inside it</title>
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.common.min.css">
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.rtl.min.css">
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.moonlight.min.css">
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.mobile.all.min.css">
    <script src="Scripts/kendoUIMVC/jquery.min.js"></script>
    <script src="Scripts/kendoUIMVC/kendo.all.min.js"></script>
</head>
<body>
<nav id="nav1">
<button class="k-button" id="btnMenuToggle" data-role="button" role="button" aria-disabled="false" tabindex="0"><span class="km-icon km-drawer-icon"></span></button>
<div id="sidebar">
    <ul id="mainMenu"></ul>
</div>

</nav>
<script>
    $(document).ready(function() {
        $("#sidebar")
            .kendoResponsivePanel({
                breakpoint: 769,//have this more than 768 since if its 768 then responsive panel will not display at screen width >= 768 rather than screen width > 768
                orientation: "left",
                toggleButton: "#btnMenuToggle"
            })
            .children("#mainMenu").kendoMenu({
            orientation: ($(window).width() > 768 ? "horizontal" : "vertical"),
            direction: "bottom left",
            dataSource: [
                {
                    text: "Foo", items: [
                        {text: "Qux ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
                        {text: "Hi Abc! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
                        {text: "Hi Klm! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
                        {text: "Hi Xyz! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"}
                    ]
                },
                {text: "Bar"}
            ]
        });
    });
</script>
</body>
</html>

ResponsivePanel

updated question on 27 Aug 2024

1 answer

241 views

Responsive Panel Breakpoint change

Hello,

I have a problem with changing the value of the breakpoint, for the responsive panel.

Example on the following code:

<body>

<nav id="navigation">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Home1</a>
<a href="#">Products1</a>
<a href="#">Home2</a>
<a href="#">Products2</a>
</nav>

<article>
<button class="k-rpanel-toggle"><span class="k-icon k-i-menu"></span></button>
Content
</article>

<script>

$("#navigation").kendoResponsivePanel({
breakpoint: 1020
});

console.log($("#navigation").data("kendoResponsivePanel").options.breakpoint);

$("#navigation").data("kendoResponsivePanel").options.breakpoint = 2000;

console.log($("#navigation").data("kendoResponsivePanel").options.breakpoint);

</script>
</body>

As the logs will tell you, the new value where the ResponsivePanel shoud start hiding the content is 2000px, that is not the case, the Panel activates at the initial value of 1020.

Is there a way to make this work, or does the ResponsivePanel not have this funktionality ?

Thanks !

ResponsivePanel

answered on 01 Apr 2019

7 answers

247 views

Immediate Close on mobile devices

I have the problem that the responsive panel closes again immediately after opening on some mobile devices.

This can be reproduced with Chrome browser on the desktop: Small window widths in desktop mode work nicely, but when I enable Galaxy or iPad emulation I get an immediate close event.

This scenario can also be reproduced with the snippets from the documentation Dojo: https://dojo.telerik.com/Iqozu

Futhermore with a longclick it can be openend, but then it does not close anymore.

Then I have tried to reproduce this issue in Windows Edge with iPad/Nexus emulation and it does not happen here.

Next step was to test another browser on my Galaxy and it did not happen there either.

Therefore in any way it has to be something with chrome browser and mobiles... hmmm

Many thanks for helping out here!

ResponsivePanel

answered on 06 Mar 2019

4 answers

138 views

State detection? Events?

How do you tell if the panel is currently visible or hidden?

It seems to lack a "State" property, and show/hide events?

Could these be added, or are there existing properties/events I could use?

The Open/Close events appear to only fire when it is opened/closed MANUALLY?

ResponsivePanel

answered on 17 Feb 2019

3 answers

49 views

looking for the responsive panel cdn

Hi

I'm looking for the responsive panel cdn - I don't wish to use the kendo.all.min.js

I tried this:

https://kendo.cdn.telerik.com/2017.2.504/js/kendo.responsive-panel.min.js

but it didn't work

Any help on this?

Thanks :)

ResponsivePanel

answered on 19 Oct 2018

1 answer

340 views

Why does the panel width change?

If you use orientation:"left", or orientation:"right", the width of the responsive panel changes as soon as the JavaScript instantiates the object. If you use orientation:"top", the width doesn't change, but when the panel is hidden, it leaves a gutter in its place.

I used your dojo at https://dojo.telerik.com/EbovAMIh to demonstrate this, using the following code.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>

</head>

<body>

<header>

<button class="toggle-button"><span class="k-icon k-i-menu"></span></button>

Logo

</header>

<div style="display:flex;">

<div id="navigation" style="flex-grow:0; background-color:red; width:100px;">

<a href="#" onclick="menu.close();">Home</a>

<br />

<a href="#" onclick="menu.close();">Products</a>

</div>

<div style="flex-grow:1; background-color:blue;">

Content

</div>

<script>

$("#navigation").kendoResponsivePanel({

orientation: "top",

toggleButton: ".toggle-button"

});

var menu = $("#navigation").data("kendoResponsivePanel");

</script>

</body>

</html>

Note that I put background colors in place to see the effect. If you change the value of orientation to top, left, and right, you can see what I'm talking about.

The behavior, as is, makes this unusable to me. I'm looking to using Bootstrap instead, but I was hoping you might be able to show me how to correct this behavior.

Thank you

ResponsivePanel

answered on 12 Jun 2018

5 answers

196 views

Allow close panel on wide screen

Hello

Is it possible to toggle panel also when visible (wide screen). Running manually close/open is not doing anything. And I would like to be able close (manually) panel, then show it, also on wide screen.

ResponsivePanel

answered on 23 May 2017

3 answers

158 views

Multiple Panels

I have a need for two panels on a page (left & right). I want different breakpoints for each one. Currently the styles that get generated will apply to all panels on the page. Can it be changed to generate styles that apply to the individual panels.

ResponsivePanel

answered on 15 Jul 2015

2 answers

275 views

How to create a Google Inbox like design with ResponsivePanel

I want to create a Layout which is similar to what's shown on the "What's New"-page but the actual Demo is pretty different.

Is it possible to create something like what you can see on the screenshot with pure Kendo UI elements or is additional styling / other Material Design libraries needed?

PS: I want to implement this in angular js

ResponsivePanel