I'm evaluating Kendo mobile for an upcoming project and am not having much luck getting a select handler on the tab strip to work as it should. I have this very simple page set up (using PhoneGap) and whenever I try to add a select handler, the UI completely fails to render and all I see is a white page with the text from all the views (no tab strip, no header, etc). If I remove the select handler, things render fine.
<!DOCTYPE html><html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta charset="utf-8"> <!-- iPad/iPhone specific css below, add after your main css > <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> --> <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> <script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script> <script> if (typeof window._nativeReady === "undefined") window._nativeReady = true; </script> <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/app.js"></script> <script src="js/kendo.mobile.min.js"></script> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script type="text/javascript"> // If you want to prevent dragging, uncomment this section /* function preventBehavior(e) { e.preventDefault(); }; document.addEventListener("touchmove", preventBehavior, false); */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html for more details -jm */ /* function handleOpenURL(url) { // TODO: do something with the url passed in. } */ function onBodyLoad() { document.addEventListener("deviceready", onDeviceReady, false); } /* When this function is called, PhoneGap has been initialized and is ready to roll */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html for more details -jm */ function onDeviceReady() { // do your thing! App.requireSession(); } </script> </head> <body onload="onBodyLoad()"> <div data-role="view" id="tabstrip-card" data-init="cardViewInit" data-title="My card" data-layout="mobile-tabstrip"> card </div> <div data-role="view" id="tabstrip-providers" data-title="Providers" data-layout="mobile-tabstrip"> providers! </div> <div data-role="view" id="tabstrip-savings" data-title="My savings" data-layout="mobile-tabstrip"> savings! </div> <div data-role="view" id="tabstrip-logout" data-title="Log out" data-layout="mobile-tabstrip"> log out! </div> <div data-role="layout" data-id="mobile-tabstrip"> <header data-role="header"> <div data-role="navbar"> <!--<a class="nav-button" data-align="left" data-role="backbutton">Back</a>--> <span data-role="view-title"></span> <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a> </div> </header> <footer data-role="footer"> <div data-role="tabstrip" id="footer-tabs"> <a href="#tabstrip-card" data-icon="contacts">My card</a> <a href="#tabstrip-providers" data-icon="history">Providers</a> <a href="#tabstrip-savings" data-icon="favorites">My savings</a> <a id="logout" href="#tabstrip-logout" data-icon="settings">Log out</a> </div> </footer> </div> <script> $(document).ready(function() { var tabStrip = $("#footer-tabs").data("kendoMobileTabstrip"); tabStrip.bind("select", function(e) { alert(1); }) }); </script> <script> window.kendoMobileApplication = new kendo.mobile.Application(document.body); </script> </body></html>2 Answers, 1 is accepted
0
Hi,
Reason for that is that the tabstrip widget is not initialized yet in document.ready event. You should bind it on the first viewShow application event.
Since this approach is far from convenient, we are going to introduce a declarative event binding through data attributes for our next release.
Regards,
Petyo
the Telerik team
Reason for that is that the tabstrip widget is not initialized yet in document.ready event. You should bind it on the first viewShow application event.
var tabStripBound = false; window.kendoMobileApplication = new kendo.mobile.Application(document.body, { viewShow: function() { if (!tabStripBound) { var tabStrip = $("#footer-tabs").data("kendoMobileTabstrip"); tabStrip.bind("select", function(e) { alert(1); }); tabStripBound = true; } }});Since this approach is far from convenient, we are going to introduce a declarative event binding through data attributes for our next release.
Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chad
Top achievements
Rank 1
Rank 1
answered on 14 Feb 2012, 06:24 AM
Ah great, that works. Definitely non-intuitive though, glad to hear another method is in the works!