Is SplitView collapsible?

[Manohar]

Hi,
Can the mobile SplitView be made collapsible?
Is it possible to define the splitview to be collapsed by default and show when a Menu button in the nav bar is touched?
The idea is to use SplitView for collapsible side menu with a list of menu options.

Or if there is a better kendo mobile widget that can be used to define a collapsible left side menu.
Please let me know.

Thanks.
B.Manohar

[Support]

I have the same question. More natively, iOS SplitView does this and I want to recreate this type of animation/transition. Maybe some jquery will do?

Hopefully Telerik / Kendo can chime in on this one.

[Support]

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>

[Support]

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.

[Burke]

@Shane

This is really interesting to me.  Would you mind creating a quick JSBin to show me what you created?  I have put together a starter one for you that contains all the necessary CSS and Script references...

http://jsbin.com/ojurot/1/edit

Cheers!

[Sejo Jahic]

Working on it. - Shane

[Sejo Jahic]

Here it is. I've left comments to explain a few things. I've also thrown in a swipe event to toggle the slide out where I didn't in my original project. This emulates other iOS apps out there even more. I would add a bit more intelligence to the swipe event, however, it does the trick as is. Just pulled up on the iPad Retina and working beautifully!

Kendo wins, hands down.

Please clean up where necessary.

http://jsbin.com/ojurot/2

Shane

[Burke]

@Shane

Very interesting implementation!  Thank you for taking the time to share that here on the forums.  I specifically like the nice slide animation applied.  I also like that it was done with just a little bit of CSS.

[Jayesh]

Thank you for posting this solution! Very helpful. The only thing I am doing different is that I am wrapping each view content in the swipe-aware touch container. 

 

Thanks,

Jayesh

[Robert]

Here is a working example: http://dojo.telerik.com/@tsveti/EqIsO/3 (Attached is the same code in case the link ever fails).

[Robert]

Here is my updated dojo because I cannot edit my post: http://dojo.telerik.com/ICino