This is a migrated thread and some comments may be shown as answers.

Responsive Panel Breakpoint change

1 Answer 38 Views
ResponsivePanel
This is a migrated thread and some comments may be shown as answers.
Stephan
Top achievements
Rank 1
Stephan asked on 28 Mar 2019, 12:24 PM

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 !

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 01 Apr 2019, 09:44 AM
Hello Stephan,

In general, the ResponsivePanel dynamically inserts a <style> tag in the document <head> that is utilizing media queries to show/hide the related content. Taking this into consideration, in order to dynamically change the breakpoint option, I would suggest the following approach:

  • Remove the related style tag from the <head>.

  • Use the setOptions() method to set the new breakpoint.

  • Register the new breakpoint media query through the _registerBreakpoint() method.

I have prepared a Dojo example that demonstrates the above approach. Not that, it might be viable to further enhance the logic for deleting the <style> tag in order to make sure that the correct element is being removed.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ResponsivePanel
Asked by
Stephan
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or