Hide Option button

[Relez]

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!

[Iliana Nikolova]

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

[Relez]

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!

[Alexander Valchev]

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.

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

[Relez]

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>

[Alexander Valchev]

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:

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

[Relez]

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

[Nithya]

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