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

Is SplitView collapsible?

10 Answers 277 Views

SplitView

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

10 Answers, 1 is accepted

answered on 26 Sep 2012, 09:40 PM

Figured it out for myself using jQuery toggle function.

Using the SplitView in KendoUI's demos I applied a CSS class to the left pane ("hide"). I also set the left pain to have a left of 0. This is needed for it to work properly. You can set this in the .hide class or inline directly on the left pane element.

<div data-role="pane" data-layout="side-default" data-transition="slide" class="hide" style="left: 0px">

Then I added a button to the NavBar of the right pane also with a css class ("toggle-button").

<div data-role="navbar">

<a data-align="left" data-role="button" href="#" class="toggle-button">Toggle</a>

Then I used this javascript code which collapses the left pane and widens the main pane, nearly at the same time. I put it near the bottom of the HTML document. (right before the closing body tag).

<script>

$('.toggle-button').click(function() {

var $leftpane = $('.hide');

var $rightpane = $('#main-pane');

$leftpane.animate({

left: parseInt($leftpane.css('left'),10) == 0 ?

-$leftpane.outerWidth() :

0

}, {duration: "fast" });

$rightpane.animate({

width: parseInt($leftpane.css('left'),10) == 0 ? $rightpane.outerWidth() +($leftpane.outerWidth()) : 0

}, {duration: "fast" });

});

</script>

answered on 25 Oct 2012, 09:41 PM

I've realized that my solution using the jQuery animation works great in the browser on the computer but when I tested on an actual mobile device (iPad, iPhone) it doesn't work well at all. What I've done, is found a much better method that is in the Kendo framework, kendoToggleClass(). This method switches the class to whatever element (in this case, the view/pane you want to collapse) and in that CSS class you identify what it needs to collapse (width, position, etc). The method then automatically also uses CSS3 transitions to animate the CSS change. When the method is called again, it toggles back to the original style, also animating it by CSS3 transition.

The result is a very smooth animation on devices such as the iPad and iPhone, where jQuery animate was not giving me this smoothness.

On my button I'm assigning its click to the function toggleClick:

<a id="toggleBtn" data-click="toggleClick" data-role="button">Press Me</a>

Then the function is calling Kendo's ToggleClass:

<script>

function toggleClick(e) {

$("#view-pane-name-here").kendoToggleClass("collapse");

}

</script>

Then you also have to have your CSS classes setup with the appropriate styling:

#view-pane-name-here {

width:400px;

}

#view-pane-name-here.collapse {

width:0px;

}

It works great and works in Safari, Chrome, Firefox, etc. Most likely will not work in IE. Works GREAT on Apple devices.

For those familiar with the Facebook iPhone app, where the news feed slides out of the way to expose the left-hand menu, I have created the exact same "functionality" in my app using Kendo Mobile with the kendoToggleClass() method.