Hide Option button

7 posts, 1 answers
  1. Relez
    Relez avatar
    45 posts
    Member since:
    Jan 2013

    Posted 11 Feb 2013 Link to this post

    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!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2619 posts

    Posted 13 Feb 2013 Link to this post

    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!
  3. Relez
    Relez avatar
    45 posts
    Member since:
    Jan 2013

    Posted 13 Feb 2013 Link to this post

    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!
  4. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2886 posts

    Posted 15 Feb 2013 Link to this post

    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!
  5. Relez
    Relez avatar
    45 posts
    Member since:
    Jan 2013

    Posted 15 Feb 2013 Link to this post

    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>
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2886 posts

    Posted 15 Feb 2013 Link to this post

    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!
  7. Relez
    Relez avatar
    45 posts
    Member since:
    Jan 2013

    Posted 15 Feb 2013 Link to this post

    Hi again, the example looks great, thanks for the help!
Back to Top