Is SplitView collapsible?

9 posts, 0 answers
  1. Manohar
    Manohar avatar
    18 posts
    Member since:
    Sep 2010

    Posted 18 Sep 2012 Link to this post

    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
  2. Support
    Support avatar
    3 posts
    Member since:
    Sep 2012

    Posted 26 Sep 2012 Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Support
    Support avatar
    3 posts
    Member since:
    Sep 2012

    Posted 26 Sep 2012 Link to this post

    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>


  5. Support
    Support avatar
    3 posts
    Member since:
    Sep 2012

    Posted 25 Oct 2012 Link to this post

    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.
  6. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 24 Jan 2013 Link to this post

    @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!
  7. Sejo Jahic
    Sejo Jahic avatar
    2 posts
    Member since:
    Jul 2009

    Posted 24 Jan 2013 Link to this post

    Working on it. - Shane
  8. Sejo Jahic
    Sejo Jahic avatar
    2 posts
    Member since:
    Jul 2009

    Posted 24 Jan 2013 Link to this post

    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
  9. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 30 Jan 2013 Link to this post

    @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.
  10. Jayesh
    Jayesh avatar
    1 posts
    Member since:
    Feb 2015

    Posted 27 Jan Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready