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!

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

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!

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>

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

Hi again, the example looks great, thanks for the help!

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();
        }