State detection? Events?

5 posts, 0 answers
  1. Nathan
    Nathan avatar
    43 posts
    Member since:
    Sep 2011

    Posted 23 Dec 2016 Link to this post

    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?

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2047 posts

    Posted 27 Dec 2016 Link to this post

    Hello,

    Indeed there is no state property of the Kendo UI Responsive Panel. Also open and hide events are triggered only when responsive panel is opened/closed manually. 

    My suggestion is to check the display value of the toggle button using the code below: 

    $(".k-rpanel-toggle").css("display")


    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Nathan
    Nathan avatar
    43 posts
    Member since:
    Sep 2011

    Posted 19 May 2017 Link to this post

    Any idea as to when a proper solution for this will be implemented.  I can't be the only person who needs this?
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2047 posts

    Posted 23 May 2017 Link to this post

    Hello Nathan,

    I am afraid that there is no other solution for this case. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. gregory
    gregory avatar
    41 posts
    Member since:
    Jun 2006

    Posted 17 Feb in reply to Boyan Dimitrov Link to this post

    I also would have preferred a native way of determining state. This is what I came up with instead:

    <!--- Forms that hold state. --->
    <!---This is the sidebar responsive navigation panel that is triggered when the screen gets to a certain size. It is a duplicate of the sidebar div above, however, I can't properly style the sidebar the way that I want to within the blog content, so it is duplicated without the styles here. --->
    <input type="hidden" id="sidebarPanelState" name="sidebarPanelState" value="initial"/>
    <script>
    $("#sidebarPanel").kendoResponsivePanel({
    breakpoint: 1280,
    orientation: "left",
    autoClose: true,
    open: onSidebarOpen,
    close: onSidbarClose
    })

    function onSidebarOpen(){
    // Change the value of the hidden input field to keep track of the state. We need some lag time and need to wait half of a second in order to allow the form to be changed, otherwise, we can't keep an accurate state and the panel will always think that the panel is closed and always open when you click on the button.
    setTimeout(function() {
      $('#sidebarPanelState').val("open");
    }, 500);
    }
    // Event handler for close event
    function onSidbarClose(){
    // Change the value of the hidden input field to keep track of the state.
    setTimeout(function() {
      $('#sidebarPanelState').val("closed");
    }, 500);
    };

    function getSidebarPanelState(){
    // Note: There is no way to automatically get the state, so I am toggling a hidden form with the state using the onSideBarOpen and close. Also, when the user clicks on the button the first time, there will be an error 'Uncaught TypeError: Cannot read property 'style' of undefined', so we will put this in a try block and iniitialize the panel if there is an error. 

    // The hidden sidebarPanelState form is set to initial on page load. We need to initialize the sidebarPanel css by setting the css to display: 'block'
    if ($('#sidebarPanelState').val() == 'initial'){
    // Set the display property to block. 
    $('#sidebarPanel').css('display', 'block');
    var sidebarPanelState = 'closed';
    } else if (($('#sidebarPanelState').val() == 'open')){
    var sidebarPanelState = 'open';
    } else if (($('#sidebarPanelState').val() == 'closed')){
    var sidebarPanelState = 'closed';
    }
    return sidebarPanelState;
    }

    // Function to open the side bar panel
    function toggleSideBarPanel(){
    // Activate the sideBarPanel and open it.
    if (getSidebarPanelState() == 'closed'){ 
    $("#sidebarPanel").kendoResponsivePanel("open");
    } else { //if ($('#sidebarPanel').css('display') == 'none'){ 
    $("#sidebarPanel").kendoResponsivePanel("close");
    }//if ($('#sidebarPanel').css('display') == 'none'){ 
    }

Back to Top