Back Button and Drawer not working properly

[Yohann]

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>

[Petyo]

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

[Yohann]

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

Please advice.

Thanks :)

[Petyo]

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

[Yohann]

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 :)

[Yohann]

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

[Petyo]

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

 

 

[Yohann]

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

[Petyo]

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