Back Button and Drawer not working properly

9 posts, 0 answers
  1. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 21 Feb 2014 Link to this post

    Hello,

    I'm having this piece of code to manage the UI:

    In my template I have:

    <div data-role="layout" data-id="overview-layout" data-platform="ios" data-model="viewModel">
         <header data-role="header">
                <div data-role="navbar">
                    <a data-role="backbutton" id="back-button" class="nav-button" data-align="left">Back</a>
                    <span data-role="view-title"></span>
                    <a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right" ></a>
                </div>
          </header>
    and then the footer and closing tab.

    And in my home page I have this one, rewriting the header:
    <div data-role="view" data-layout="overview-layout" data-init="initiate_geolocation()" data-title="Meet My Friends" id="two-drawer-home">
                <header data-role="header">
                    <div data-role="navbar">
                        <a data-role="button" data-rel="drawer" href="#left-drawer" data-icon="drawer-button" data-align="left"></a>
                        <span data-role="view-title"></span>
                        <a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right" ></a>
                    </div>
                </header>


    The reason why I'm doing this is I need 2 menus on the home page, but I want to remove one of the left drawer on any other page and display the back button again.
    So basically it "almost" works... almost

    I'm having 2 difficulties to make it works.

    1 - When going to another page From a link from the left or the right drawer, if I want to go back to the previous page by pressing the back button I come back to to the page at the position it was when the drawer is open (totally on the left or the right of the screen to let the drawer be displayed). But the drawer is not display so I just have some blank space left on the side of the screen. Why is the page not re initialized at the correct position ( center of the screen ). It seems like the page is not re initialized at its correct position or that I'm redirected to the drawer page that does not open/display.

    2 - When I'm on a different page than the home page, the right drawer does not work at all .. only the back button works. Why ?

    Many Thanks

    Below is the code of the 2 menus: 

    <!-- LEFT MENU -->
    <div data-role="drawer" id="left-drawer" style="width: 100px" data-title="What's Up" data-views="['two-drawer-home', '/mobile/m/drawer/two-way-drawers.html']" data-before-show="prevent">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
     
        <ul id="left-drawer-menu">
            <li id="LM-available" ><div class="number">0</div>Available Friends</li>
            <li id="LM-notified" ><div class="number">0</div>Notified Events</li>
            <li id="LM-matched" ><div class="number">0</div>Matches</li>
            <li id="LM-invites" ><div class="number">0</div>Invites</li>
        </ul>
    </div>
     
    <!-- RIGHT MENU -->
    <div data-role="drawer" id="right-drawer" style="width: 200px" data-title="Menu" data-position="right" data-views="['two-drawer-home', '/mobile/m/drawer/two-way-drawers.html']" data-before-show="prevent" data-init="checkAvailability">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
     
        <ul data-role="listview" id="leftMenuList">
            <!-- <li data-icon="organize">Event Calendar</li> -->
            <li data-icon="settings"><a href="#profile">Profil</a></li>
            <li data-icon="settings"><a href="#interests">Centers Of Interests</a></li>
            <li data-icon="add">Create Event</li>
            <li data-icon="add">Search Friends?</li>
            <li data-icon="comments">Let's Hang Out Today! <input id="switchAvailable" type="checkbox" data-role="switch" data-change="switchAvailability"></li>
            <li data-icon="graph"><a href="#" id="logout">Log Out</a></li>
            <hr />
        </ul>
    </div>

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Feb 2014 Link to this post

    Hi Yohann,

    This sounds like one of the bugs we encountered and addressed after the 1324 service pack release. Is it possible for you to test the same case with the latest internal build available for download in your account? 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 26 Feb 2014 in reply to Petyo Link to this post

    I've updated the .js and .css file but unfortunately, it shows the exact same behavior.

    Please advice.

    Thanks :)
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 28 Feb 2014 Link to this post

    Hello Yohann,

    In that case, we will have to reproduce the problem on our side. It may as well be that you have discovered a bug which we are not aware of yet. Is it possible for you to send us an isolated example (alternatively, a jsbin would do) which reproduces the problem? We will take a look and advice you accordingly. 

    Thank you in advance,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 02 Apr 2014 in reply to Petyo Link to this post

    Hello,

    Sorry for the delay, I've been trying to reproduce the behavior on jsfiddle without success, can't have the app working.

    In the meantime, I've tried to reproduce it in a single file app for you to try it.
    In the attached file, you only have to replace the kendo css and js files with yours and give it a try.

    When going to the left menu, and clicking on profile page, you can see the way it slide is somewhat buggy + when clicking on the back button, the behavior is a bit buggy as the home page is still stuck on the left as if the menu was still open when it is not (just display some blank space) + cannot access the right menu anymore.

    Can you help me solving this issue please ?
    I can't push the app on the store until I have fixed this.

    Please let me know if you can reproduce this bug in your environment.

    Many thanks :)
  7. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 02 Apr 2014 in reply to Yohann Link to this post

    Oops, an error slipped into the second paragraph.

    I meant when going to the right menu and clicking on the profil page.

    Thank you for giving a try
  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Apr 2014 Link to this post

    Hi Yohann,

    the problem you experience is due to the application having a default slide transition set - the drawer transitions are overlapping with it. You can either remove the default setting, or set the ListView link item data-transition="none" attribute - please check the example I created

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 04 Apr 2014 in reply to Petyo Link to this post

    Thank you very much, I've been stuck on this matter for weeks.

    Last small thing:

    As we can see in your example, the menu butto still appear when on the profil page AND doesn't work.

    Is there a way to remove it ?

    Many Thanks
  10. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Apr 2014 Link to this post

    Hello Yohann,

    you can remove it using a CSS rule bound to this view - something like:

    #profile [data-rel=drawer] {
    display: none;
    }


    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready