ListView Won't Read Template

2 posts, 0 answers
  1. Pete
    Pete avatar
    2 posts
    Member since:
    Mar 2013

    Posted 29 Mar 2013 Link to this post

    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.
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
         
        <script src="http://code.jquery.com/jquery-1.7.1.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>
    Thanks,
    Pete
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 01 Apr 2013 Link to this post

    Hi Pete,

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top