Responsive Panel Breakpoint change

2 posts, 0 answers
  1. Stephan
    Stephan avatar
    5 posts
    Member since:
    Feb 2013

    Posted 28 Mar Link to this post

    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 !

  2. Dimitar
    Admin
    Dimitar avatar
    633 posts

    Posted 01 Apr Link to this post

    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.
Back to Top