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

State detection? Events?

4 Answers 32 Views
ResponsivePanel
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 2
Nathan asked on 23 Dec 2016, 05:49 PM

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?

4 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 27 Dec 2016, 09:56 AM
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.
0
Nathan
Top achievements
Rank 2
answered on 19 May 2017, 08:17 PM
Any idea as to when a proper solution for this will be implemented.  I can't be the only person who needs this?
0
Boyan Dimitrov
Telerik team
answered on 23 May 2017, 02:42 PM

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.
0
gregory
Top achievements
Rank 1
answered on 17 Feb 2019, 06:11 AM

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

Tags
ResponsivePanel
Asked by
Nathan
Top achievements
Rank 2
Answers by
Boyan Dimitrov
Telerik team
Nathan
Top achievements
Rank 2
gregory
Top achievements
Rank 1
Share this question
or