State detection? Events?

[Nathan]

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?

[Boyan Dimitrov]

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

[Nathan]

Any idea as to when a proper solution for this will be implemented.  I can't be the only person who needs this?

[Boyan Dimitrov]

Hello Nathan,

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

Regards,
Boyan Dimitrov
Telerik by Progress

[gregory]

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'){ 
}