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
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.
Iliana Nikolova
the Telerik team
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
>
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
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).
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
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?
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.
Iliana Nikolova
Telerik