Auto Enable/Disable back button

9 posts, 0 answers
  1. Ahmad
    Ahmad avatar
    7 posts
    Member since:
    Jul 2012

    Posted 06 Jul 2012 Link to this post

    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 


  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 11 Jul 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Rayne
    Rayne avatar
    241 posts
    Member since:
    Sep 2010

    Posted 30 Jul 2012 Link to this post

    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.
  5. Roger
    Roger avatar
    1 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2012 Link to this post

    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>

  6. Bese
    Bese avatar
    3 posts
    Member since:
    Dec 2010

    Posted 20 Sep 2012 Link to this post

    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 
  7. Berin
    Berin avatar
    5 posts
    Member since:
    Jul 2012

    Posted 24 Jan 2013 Link to this post

    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).
  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Jan 2013 Link to this post

    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!
  9. Richard
    Richard avatar
    7 posts
    Member since:
    Nov 2012

    Posted 14 Aug 2013 Link to this post

    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?
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 15 Aug 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready