KendoUI ActionSheet in Angular Called From NavBar Button - Error

4 posts, 0 answers
  1. Patrick
    Patrick avatar
    29 posts
    Member since:
    Apr 2014

    Posted 03 Apr Link to this post

     

     

    The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad. 

    Codepen is here

    http://codepen.io/jcbowyer/pen/wGrLmE

     

    <html>
     
    <head>
      <meta charset="utf-8">
      <title>Kendo UI Mobile Loves AngularJS</title>
     
      <!-- the application CSS file -->
     
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
     
    <body kendo-mobile-application ng-app="sushiMobileApp">
     
      <kendo-mobile-view id="index">
        <kendo-mobile-header>
          <kendo-mobile-nav-bar>
            Home View
            <button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button>
          </kendo-mobile-nav-bar>
        </kendo-mobile-header>
        <ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
          <li><a href="#" data-command="login">Login</a></li>
          <li ng-hide="(authentication.token.length == 0)"><a href="#" data-command="logout">Logout</a></li>
          <li><a href="#" data-command="showProfile">My Profile</a></li>
        </ul>
      </kendo-mobile-view>
     
      <script>
        angular.module('sushiMobileApp', [ 'kendo.directives' ]);
      </script>
     
    </body>
     
    </html>

    The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.

    Codepen is here

    http://codepen.io/jcbowyer/pen/wGrLmE

    The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.

    Codepen is here

    http://codepen.io/jcbowyer/pen/wGrLmE

    The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.

    Codepen is here

    The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.

    Codepen is here

    http://codepen.io/jcbowyer/pen/wGrLmE

    The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.

    Codepen is here

    http://codepen.io/jcbowyer/pen/wGrLmE

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 05 Apr Link to this post

    Hi,

    most likely, the problem is due to the on-click event handler being evaluated before the elements (including the button) is present in the DOM. I may suggest that you move it to a scope field instead, or use the data-rel syntax which is built-in mechanism for opening an actionsheet from a button. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. UI for ASP.NET AJAX banner
  4. Patrick
    Patrick avatar
    29 posts
    Member since:
    Apr 2014

    Posted 05 Apr in reply to Petyo Link to this post

    Thanks for your response

    1.  I am not clear what you mean by move it to a scope field, can you provide more explanation?
    2.  On the data-rel syntax, this does not appear to work in angular.  There may be an equivalent k-rel syntax but I can find no examples or documentation of how to use it.

    If you could provide a sample or more guidance on how I could fix this in my sample, I would greatly appreciate it.

     

     

  5. Patrick
    Patrick avatar
    29 posts
    Member since:
    Apr 2014

    Posted 05 Apr in reply to Patrick Link to this post

    I figured out how to get this work with k-rel.

    Updated code is below

    Codepen here

    http://codepen.io/jcbowyer/pen/KzyQwa

     

    <html>
     
    <head>
      <meta charset="utf-8">
      <title>Kendo UI Mobile Loves AngularJS</title>
     
      <!-- the application CSS file -->
     
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
     
    <body kendo-mobile-application ng-app="sushiMobileApp">
     
      <kendo-mobile-view id="index">
        <kendo-mobile-header>
          <kendo-mobile-nav-bar>
            Home View
            <a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile"
                    k-rel="'actionsheet'"
                    href="#mnuProfile"></a>
          </kendo-mobile-nav-bar>
        </kendo-mobile-header>
        <ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
          <li><a href="#" data-command="login">Login</a></li>
          <li ng-hide="(authentication.token.length == 0)"><a href="#" data-command="logout">Logout</a></li>
          <li><a href="#" data-command="showProfile">My Profile</a></li>
        </ul>
      </kendo-mobile-view>
     
      <script>
        angular.module('sushiMobileApp', [ 'kendo.directives' ]);
      </script>
     
    </body>
     
    </html>
    http://codepen.io/jcbowyer/full/KzyQwa/

     

     

Back to Top
UI for ASP.NET AJAX banner