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

KendoUI ActionSheet in Angular Called From NavBar Button - Error

3 Answers 52 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 04 Apr 2016, 02:42 AM

 

 

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

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 05 Apr 2016, 03:10 PM
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!
 
0
Patrick
Top achievements
Rank 1
answered on 05 Apr 2016, 03:47 PM

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.

 

 

0
Patrick
Top achievements
Rank 1
answered on 05 Apr 2016, 04:02 PM

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/

 

 

Tags
Integration with other JS libraries
Asked by
Patrick
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Patrick
Top achievements
Rank 1
Share this question
or