kendo: Enable / Disable button in navigation bar - kendo-ui

Question

Below is a definition of the navigation bar, part of a view template that is used among several screens:
<div data-role="layout" data-id="app">
<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">Title</span>
<a class="nav-button" data-align="right" data-role="button" data-click="doneTapped" id="btnDone">Done</a>
</div>
</header>
</div>
The "Done" button is only needed on some screens, so it gets hidden when the main page loads:
$("#btnDone").hide();
Hiding the button works fine, but showing it again does not work:
$("#btnDone").show();
The button does not show up.

Answer 1

Instead of using $("#btnDone").hide(); and $("#btnDone").show(); use:
Hide button:
$("#btnDone").css("visibility", "hidden");
Show button:
$("#btnDone").css("visibility", "visible");

Answer 2

Something that has worked for me in this situation is to put a class on the button I want to show/hide instead of relying on the id:
<div data-role="layout" data-id="app">
<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">Title</span>
<a class="nav-button btnDone" data-align="right" data-role="button" data-click="doneTapped" id="btnDone">Done</a>
</div>
</header>
</div>
And then use the class to hide it:
$(".btnDone").hide();
Hope this works for you as well.

Answer 3

Salam,
Try the following:
<!--Home-->
<div id="tabstrip-home"
data-role="view"
data-init="app.home"
data-title="Home">
<!--Header-->
<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">Title</span>
<a class="nav-button" data-align="right" data-role="button" data-click="doneTapped" id="btnDone">Done</a>
</div>
</header>
<!--Content-->
<div class="view-content">
<h1>Hide / Show Navbar Elements</h1>
<p>
<center>
<a data-align="left" data-role="button" data-click="app.show">Show</a>
</center>
<br />
<center>
<a data-align="left" data-role="button" data-click="app.hide">Hide</a>
</center>
</p>
</div>
</div>
In the data-init="app.home" function you find the navbar, then the leftElement and have references to them then you can control it, Example:
var navbar = null;
var left = null;
global.app.home = function (e) {
navbar = e.sender.header.find('div[data-role="navbar"]').data('kendoMobileNavBar');
left = navbar.leftElement;
console.log(left);
};
global.app.show = function (e) {
left.show();
};
global.app.hide = function (e) {
left.hide();
};
Please see a working example here: http://jsbin.com/EpInoQOq/1/edit
Regards

Answer 4

The way I handled hiding and shwowing the Back Button on different views was to use 2 different Layouts. This worked well for my use case as I only show the back button on 1 page:
<!--Default Layout with Main Menu and no backbutton-->
<div data-role="layout" data-id="layout">
<!--Header-->
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!--Footer-->
<div data-role="footer">
<div data-role="tabstrip">
....
</div>
</div>
</div>
<!--Layout with Back Button-->
<div data-role="layout" data-id="layoutBackButton">
<div data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">
<!-- data-bind="isVisible: showBackButton" -->
<i class="fa fa-chevron-left fa-lg"></i>
</a>
<span data-role="view-title"></span>
</div>
</div>
</div>
My Remote View that uses the Back button then specifies the other Layout:
<div data-layout="layoutBackButton"
data-role="view"
...>