This is a migrated thread and some comments may be shown as answers.

Hide Option button

7 Answers 3679 Views
Button (Mobile)
This is a migrated thread and some comments may be shown as answers.
Relez
Top achievements
Rank 1
Relez asked on 11 Feb 2013, 02:33 PM
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!

7 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 13 Feb 2013, 12:21 PM
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
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!
0
Accepted
Alexander Valchev
Telerik team
answered on 15 Feb 2013, 12:13 PM
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
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>
0
Alexander Valchev
Telerik team
answered on 15 Feb 2013, 04:01 PM
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
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();
        }

Tags
Button (Mobile)
Asked by
Relez
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Relez
Top achievements
Rank 1
Alexander Valchev
Telerik team
Nithya
Top achievements
Rank 1
Share this question
or