What am I doing wrong here? The ListView named #month_list won't render. I'm trying to piece together a solution from a couple of solutions I found in the blogs and example code.
Thanks,
Pete
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8" /> <script src="cordova.js"></script> <link href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://cdn.kendostatic.com/2013.1.226/js/kendo.all.min.js"></script> <link href="styles/attendance.css" rel="stylesheet" /> </head> <body> <script type="text/javascript"> navigator = { months : ["January","February","March","April","May","June","July","August","September","October","November","December"], setDate : function(newDate) { this.selected = { date : newDate, year : newDate.getFullYear(), month : newDate.getMonth(), day : newDate.getDate() } return this; }, initMonthView : function(e) { e.view.header.find('[data-role=view-title]').text(navigator.months[navigator.selected.month]); e.view.header.find('#previous').on("click", navigator.prevMonth); e.view.header.find('#next').on("click", navigator.nextMonth); // e.view.datasource.filter(); }, initDayView : function(e) { e.view.header.find('[data-role=view-title]').text(navigator.months[navigator.selected.month]+' '+navigator.selected.day); e.view.header.find('#previous').on("click", navigator.prevDay); e.view.header.find('#next').on("click", navigator.nextDay); // e.view.datasource.filter(); }, initAttendance: function(e) { e.view.header.find('[data-role=view-title]').text(navigator.months[navigator.selected.month]+' '+navigator.selected.day); }, prevMonth : function(e) { navigator.setDate(navigator.selected.date.setMonth( navigator.selected.date.getMonth()-1 )); }, nextMonth : function(e) { navigator.setDate(navigator.selected.date.setMonth( navigator.selected.date.getMonth()+1 )); }, prevDay : function(e) { navigator.setDate(navigator.selected.date.setDate( navigator.selected.date.getDate()-1 )); }, nextDay : function(e) { navigator.setDate(navigator.selected.date.setDate( navigator.selected.date.getDate()+1 )); }, }; navigator.setDate(new Date()); </script> <script type="text/javascript"> classes = kendo.observable({ dataSource : new kendo.data.DataSource( [ { "user_id" : 1, "report_id" : 1, "report_submitted" : 0, "report_date" : "March 28 2013", "period_code" : "A", "class_title" : "Basic I" } ] ) }); </script> <script id="class_list" type="text/x-kendo-template"> <li class="class"> <span class="period" data-bind="text:period_code"></span> <span class="title" data-bind="text:class_title"></span> <a data-role="detailbutton" data-style="detaildisclose"></a> </li> </script> <div id="month" data-role="view" data-title="Month" data-model="classes" data-show="navigator.initMonthView"> <div id="calendar" data-role="calendar"></div> <!-- /rest/blackbaud/classes?date>=#=selected_year##=selected_month#01&end_datetime<now&submitted=0 --> <ul id="month_list" data-role="listview" data-template="class_list" data-source="classes.dataSource" data-use-native-scroller="true"></ul> </div> <!-- LAYOUTS --> <div data-role="layout" data-id="main-layout" data-platform="android"> <div data-role="footer"> <button id="current_period" style="float:right"> #=current_period# </button> <button id="current_view" style="float:left"> <span data-role="view-title"></span> <span class="icon-bottom-right-corner"></span> </button> <menu id="view_menu"> <menuitem id="view_menu_month"><a href="#month">Month #=current_month#</a></menuitem> <menuitem id="view_menu_day"><a href="#day">Day #=current_day#</a></menuitem> <menuitem id="view_menu_attendance"><a href="#attendance">Period #=current_period#</a></menuitem> </menu> </div> </div> <div data-role="layout" data-id="main-layout" data-platform="ios"> <div data-role="header"> <div data-role="navbar"> <a id="previous" href="#"><img class="icon-left-arrow" src="images/left-arrow.png" width="16" height="22" /></a> <a id="next" href="#"><img class="icon-right-arrow" src="images/right-arrow.png" width="16" height="22" /></a> <span data-role="view-title"></span> </div> </div> <div data-role="footer"> <ul data-role="buttongroup"> <a href="#month"><li>Month</li></a> <a href="#day"><li>Day</li></a> <a href="#attendance"><li>Class</li></a> </ul> </div> </div> <!-- SCRIPTS --> <script type="text/javascript"> $(document).ready(function(){ }); var app = new kendo.mobile.Application(document.body, { // initial: "login", icon: "images/FAWeb_favicon_32-16.png", layout: "main-layout" }); </script> </body></html>Pete
1 Answer, 1 is accepted
0
Hi Pete,
Petyo
the Telerik team
The datasource initialization is incorrect, please check the respective documentation. I would also recommend that you use jQuery 1.9.1, as this is the version Kendo UI Q1 2013 is shipped and tested most extensively with.
All the best,Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!