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

Auto Enable/Disable back button

8 Answers 879 Views
NavBar
This is a migrated thread and some comments may be shown as answers.
Ahmad
Top achievements
Rank 1
Ahmad asked on 06 Jul 2012, 12:31 PM
Hi

How can I manage the back button in the navbar?

for example, I don't want to show the button in the main views and when user click a link to sub view I would like to show him the button

I tried using "data-show" call a function that will use jquery to show/hide the back button but the problem kendo will change the navbar title and button 


8 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 11 Jul 2012, 08:35 AM
Hello Ahmad,

I have already replied to your support ticket on the same subject. For convenience I am pasting my reply here as well. In that way the other users who have similar questions would be able to read it.

We have an online demo which illustrates such functionality in action. Please check it and let me know if you have any further questions.
 

Greetings,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rayne
Top achievements
Rank 1
answered on 30 Jul 2012, 07:10 PM
I'm having the same trouble. I added a navbar to my layout then defined each view to use that layout. Very similar to the example. But the main page shows the back button.
0
Roger
Top achievements
Rank 1
answered on 11 Sep 2012, 07:38 PM
I think you need to have different layouts, one for the default pages and one for the second level pages that need the back button.

Default Layout:
<div data-role="layout" data-id="default">
  <header data-role="header">
    <div data-role="navbar">
      <span data-role="view-title"></span>
  </div><!-- /navbar -->
  </header>
  <!--View content will render here-->
  <div data-role="footer">
    <div data-role="tabstrip">
      <a href="#tabstrip-home" data-icon="home">Parent</a>
    </div><!-- /tabstrip -->
  </div><!-- /footer -->
  </div><!-- /layout - default -->

Back Button Layout:
<div data-role="layout" data-id="back">
  <header data-role="header">
    <div data-role="navbar">
      <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
      <span data-role="view-title"></span>
      </div><!-- /navbar -->
  </header>
  <!--View content will render here-->
  <div data-role="footer">
    <div data-role="tabstrip">
      <a href="#tabstrip-home" data-icon="home">Parent</a>
    </div><!-- /tabstrip -->
  </div><!-- /footer -->
  </div><!-- /layout - back -->


Then, if you have a "Parent" page that's in the tabstrip (no back button) and a "Child Page" that is not in the tabstrip (needs back button) you would set them as such:

Parent Page:
<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
</head>
    <body>
        <div data-role="view" id="parent-page" data-title="Parent page" data-layout="default">
      </div><!-- /#parent-page -->
    </body>
</html>


Child Page:
<!DOCTYPE html>
<html>
<head>
    <title>Child Page</title>
</head>
    <body>
        <div data-role="view" id="child-page" data-title="Child page" data-layout="back">
      </div><!-- /#child-page -->
    </body>
</html>

0
Bese
Top achievements
Rank 1
answered on 20 Sep 2012, 11:39 AM
Hi,

you can use simple css to hide back button when it's needless.

Supposing your application has a main layout,

<div data-role="layout" data-id="layout">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
        </div>
    </header>
<div>

a top-level view

<div id="index" data-role="view" data-layout="layout" data-title="Top-Level View" class="no-back">
    <a href="#child-view" data-role="button" data-transition="slide">Child View</a>
</div>

and a child view,

<div id="child-view" data-role="view" data-layout="layout" data-title="Child View">
    <p>Lorem ipsum</p>
</div>

the back button can be controlled by the following css:

.no-back .km-back {
    visibility: hidden;
}

Best regards,
Bese 
0
Berin
Top achievements
Rank 1
answered on 24 Jan 2013, 09:58 PM
What if I link a user directly to a secondary view?  How can I determine whether or not I should hide the back button?

Normally, it would be there, since I'm linking to the secondary view from search results.  However, in a direct-link scenario, there's no need to show the back button.

If anything, I'd prefer to set it to default to a specific destination (the main menu).
0
Petyo
Telerik team
answered on 25 Jan 2013, 08:30 AM
Hi Berin,

You may use a global variable value set on the main view show event in order to determine if the back button should be displayed. You can also set its location using the href attribute, like a regular button.

Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Richard
Top achievements
Rank 1
answered on 14 Aug 2013, 02:39 PM
Iliana, where is the answer you indicate you are posting here?

Also, the demo you reference is not available in the offline install set of demos. I personally find the iFrame demos on your site unusable, is there anyway to show the demos on the website outside the context of a frame?
0
Iliana Dyankova
Telerik team
answered on 15 Aug 2013, 04:37 PM
Hello Richard,

The answer is in my first post in italic styling. As for the demo, you are right - it is missing in the Kendo UI MVC offline examples, however we will address this issue. For your convenience I attached the source code for the Mobile View demo.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
NavBar
Asked by
Ahmad
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Rayne
Top achievements
Rank 1
Roger
Top achievements
Rank 1
Bese
Top achievements
Rank 1
Berin
Top achievements
Rank 1
Petyo
Telerik team
Richard
Top achievements
Rank 1
Share this question
or