Hello Forum:
I have a Kendo UI button in a header of a layout, and I would like to hide it using jQuery:
$("#option-button").css('display', 'none');
But the button doesnt hide, is there any way to hide it using a specific function in Kendo UI?
I will appreciate any help.
Thanks!
I have a Kendo UI button in a header of a layout, and I would like to hide it using jQuery:
$("#option-button").css('display', 'none');
But the button doesnt hide, is there any way to hide it using a specific function in Kendo UI?
I will appreciate any help.
Thanks!
7 Answers, 1 is accepted
0
Hi Relvis,
There is no built-in functionality in Kendo UI for hiding buttons, however your approach is totally valid (check this short screencast capture) and I am not quite sure why it does not work in your application. Could you please make sure the id of the button is correct?
Regards,
Iliana Nikolova
the Telerik team
There is no built-in functionality in Kendo UI for hiding buttons, however your approach is totally valid (check this short screencast capture) and I am not quite sure why it does not work in your application. Could you please make sure the id of the button is correct?
Regards,
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
Relez
Top achievements
Rank 1
answered on 13 Feb 2013, 01:50 PM
I also check the id button, here is the piece of code:
HTML file:
<div data-role="layout" id="mobile-tabstrip" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
<a id="menu-option-button" data-click="smMenuClicked" data-align="right" data-role="button">Option</a>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
</div>
</div>
</div>
Here is the Javascript file:
$("#menu-option-button").css('display', 'none');
I make sure the id of the button is unique.
Then I see the typeof of the result of this: $("#menu-option-button") it says is an Object. Its that right?
Thanks!
HTML file:
<div data-role="layout" id="mobile-tabstrip" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
<a id="menu-option-button" data-click="smMenuClicked" data-align="right" data-role="button">Option</a>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
</div>
</div>
</div>
Here is the Javascript file:
$("#menu-option-button").css('display', 'none');
I make sure the id of the button is unique.
Then I see the typeof of the result of this: $("#menu-option-button") it says is an Object. Its that right?
Thanks!
0
Accepted
Hello Relvis,
It is not recommended to use ID's in the application layout. When the application is initialized, the layout is removed from the DOM and stored in a JavaScript variable. When any view that uses a layout is shown, the elements from the layout are copied/cloned into the views. Using an ID in a layout will result into having multiple elements with equal ID. This is not a valid HTML and this is the reason your code does not work.
As a solution I suggest to use a class instead of an ID. When you want to hide the button, you should get the reference to the current view (view method) and find the element (by class) inside the header element.
For your convenience I prepared a small example: http://jsbin.com/ufigap/2/edit
I hope this will help.
Regards,
Alexander Valchev
the Telerik team
It is not recommended to use ID's in the application layout. When the application is initialized, the layout is removed from the DOM and stored in a JavaScript variable. When any view that uses a layout is shown, the elements from the layout are copied/cloned into the views. Using an ID in a layout will result into having multiple elements with equal ID. This is not a valid HTML and this is the reason your code does not work.
As a solution I suggest to use a class instead of an ID. When you want to hide the button, you should get the reference to the current view (view method) and find the element (by class) inside the header element.
app.view().header.find(
".menu-option-button"
).hide();
For your convenience I prepared a small example: http://jsbin.com/ufigap/2/edit
I hope this will help.
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Relez
Top achievements
Rank 1
answered on 15 Feb 2013, 03:02 PM
Hello Alexander,
Thanks for your help, your recommendation is great but I still have a problem because I need to hide the button before the View shows. I have tried using the the init, beforeShow events but still dont work. This is my code example:
<div data-role="view" id="tabstrip-dash" data-title="Summary" data-layout="mobile-tabstrip" data-before-show="hideButton" data-init="hideButton">
<ul id="summary-listview" class="summarycontainer"></ul>
</div>
<div data-role="layout" id="mobile-tabstrip" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
<a class="menu-option-button" data-click="smMenuClicked" data-align="right" data-role="button">Option</a>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
</div>
</div>
</div>
<script>
...
function hideButton() {
app.view().header.find(".menu-option-button").hide();
}
...
</script>
Thanks for your help, your recommendation is great but I still have a problem because I need to hide the button before the View shows. I have tried using the the init, beforeShow events but still dont work. This is my code example:
<div data-role="view" id="tabstrip-dash" data-title="Summary" data-layout="mobile-tabstrip" data-before-show="hideButton" data-init="hideButton">
<ul id="summary-listview" class="summarycontainer"></ul>
</div>
<div data-role="layout" id="mobile-tabstrip" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
<a class="menu-option-button" data-click="smMenuClicked" data-align="right" data-role="button">Option</a>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
</div>
</div>
</div>
<script>
...
function hideButton() {
app.view().header.find(".menu-option-button").hide();
}
...
</script>
0
Hello Relvis,
You should use a slightly different syntax if you want to hide the button at one of the View events.
Please try the following:
For convenience I updated the example: http://jsbin.com/ufigap/7/edit
Kind regards,
Alexander Valchev
the Telerik team
You should use a slightly different syntax if you want to hide the button at one of the View events.
Please try the following:
function
onInit(e) {
e.view.header.find(
".menu-option-button"
).hide();
}
For convenience I updated the example: http://jsbin.com/ufigap/7/edit
Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Relez
Top achievements
Rank 1
answered on 15 Feb 2013, 04:35 PM
Hi again, the example looks great, thanks for the help!
0
Nithya
Top achievements
Rank 1
answered on 10 Dec 2020, 08:15 PM
I seriously a learnt a big lesson . I missed the paranthese and took me almost half a day to realise this..
() - calls a method
No paranthese - calls properties
if (grid.selectedKeyNames().length > 0) {
$('#btnRemoveFromList').show();
} else {
$('#btnRemoveFromList').hide();
}