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 !
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!
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?
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 :)
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
>
</
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
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.
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
Your demo is not working. The configuration must be:
$(
"#navigation"
).kendoResponsivePanel({
orientation:
"top"
,
toggleButton:
".toggle-button"
});
not:
$(
"#navigation"
).kendoResponsivePanel({
orientation:
"top"
,
toggleButton:
"toggle-button"
});
You are missing dot (.).