Mobile List View Header Templates

2 posts, 0 answers
  1. Sean
    Sean avatar
    19 posts
    Member since:
    Jun 2012

    Posted 30 Mar 2014 Link to this post

    Ok, I have looked at pretty much every demo and every post on Stack Overflow. Nothing I do seems to work with this.

    I am using the AppBuilder simulator to look at my app as it would display on avrious devices. I ahve a few list views that show data in the form of a table, and I need that table to have a header row. I thought it would be simple, but the header never gets bound. It shows it there in my debug view of the page, but it is an empty div. Below is my relevant Markup code:

    <body>
        <!--Home-->
        <div data-role="view" id="summary"
             data-init="mobileListViewDataBindInit"
             data-title="Summary All Parks"
             data-layout="summarybinding">
           
            <ul data-role="listview" id="summarylistview"></ul>
        </div>
        <div data-role="view" id="hourly"
             data-title="Hourly Detail"
             data-layout="hourlybinding">
            <ul data-role="listview" id="hourlylistview" data-inset="true"></ul>
        </div>
     
     <div data-role="layout" data-id="summarybinding">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>
        </div>
        <div data-role="layout" data-id="hourlybinding">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                    <a href="summary" data-role="backbutton" id="park-back" data-align="left">Back</a>
                    <a href="accum" data-role="button" id="park-accum" data-click="acumclick" data-align="right">Accum</a>
                     
                </div>
            </header>
        </div>
     
      <script type="text/x-kendo-template" id="summaryTemplate">
            <table style="width:100%;">
                <tr>
                    <td style="text-align: center; width: 8%;"><p class="item-info">#=Park#</p></td>
                    <td style="text-align: center; width: 10%;"><p class="item-info">#=TotalFirstEntries#</p>  </td>
                    <td style="text-align: center; width: 10%;"><p class="item-info">#=TotalForecast#</p> </td>
                    <td style="text-align: center; width: 10%;"><p class="item-info">#=TotalBudgetAttendance#</p></td>
                    <td style="text-align: center; width: 10%;"><p class="item-info">#=TotalBudgetVariance#</p>  </td>
                    <td style="text-align: center; width: 10%;"><p class="item-info">#=InPark#</p> </td>
                    <td style="text-align: center; width: 10%;"><p class="item-info">#=OpeningTime#</p></td>
                    <td style="text-align: center; width: 10%;"><p class="item-info">#=ClosingTime#</p>  </td>
                    <td style="text-align: center; width: 10%;"><p class="item-info">#=LastYearActualAttendance#</p> </td>
                    <td style="text-align: center; width: 7%;"><p class="item-info">#=LastYearWeatherCode#</p> </td>
                    <td style="text-align: right; width: 3%;cursor:pointer;vertical-align:middle;">
                        <a href="hourly" data-role="detailbutton" data-click="click" data-parkid="#=ParkID#" data-icon="details"></a>
                    </td>
                </tr>
            </table>
        </script>
        <script type="text/x-kendo-template" id="hourlyTemplate">
            <table style="width:100%;font-size:.5em;line-height:1.2em;">
                <tr>
                    <td style="width: 15%;">#=FirstColumn# </td>
                    <td style="width:4%;">#=Hour7#  </td>
                    <td style="width:4%;">#=Hour8# </td>
                    <td style="width:4%;">#=Hour9# </td>
                    <td style="width:4%;">#=Hour10# </td>
                    <td style="width:4%;">#=Hour11# </td>
                    <td style="width:4%;">#=Hour12# </td>
                    <td style="width:4%;">#=Hour13# </td>
                    <td style="width:4%;">#=Hour14# </td>
                    <td style="width:4%;">#=Hour15# </td>
                    <td style="width:4%;">#=Hour16# </td>
                    <td style="width:4%;">#=Hour17# </td>
                    <td style="width:4%;">#=Hour18# </td>
                    <td style="width:4%;">#=Hour19# </td>
                    <td style="width:4%;">#=Hour20# </td>
                    <td style="width:4%;">#=Hour21# </td>
                    <td style="width:4%;">#=Hour22# </td>
                    <td style="width:4%;">#=Hour23# </td>
                    <td style="width:4%;">#=Hour00# </td>
                    <td style="width:4%;">#=Hour01# </td>
                    <td style="width:4%;">#=Hour02# </td>
                    <td style="width:4%;">#=Hour03# </td>
     
                </tr>
            </table>
        </script>
     
        <script type="text/x-kendo-template" id="hourlyHeaderTemplate">
            <table data-role="header" style="width:100%;font-size:.5em;">
                <tr>
                    <td style="width:15%;">As of</td>
                    <td style="width:4%;">7<br />AM </td>
                    <td style="width:4%;">8<br />AM</td>
                    <td style="width:4%;">9<br />AM</td>
                    <td style="width:4%;">10<br />AM</td>
                    <td style="width:4%;">11<br />AM</td>
                    <td style="width:4%;">12<br />PM</td>
                    <td style="width:4%;">1<br />PM</td>
                    <td style="width:4%;">2<br />PM</td>
                    <td style="width:4%;">3<br />PM</td>
                    <td style="width:4%;">4<br />PM</td>
                    <td style="width:4%;">5<br />PM</td>
                    <td style="width:4%;">6<br />PM</td>
                    <td style="width:4%;">7<br />PM</td>
                    <td style="width:4%;">8<br />PM</td>
                    <td style="width:4%;">9<br />PM</td>
                    <td style="width:4%;">10<br />PM</td>
                    <td style="width:4%;">11<br />PM</td>
                    <td style="width:4%;">12<br />AM</td>
                    <td style="width:4%;">1<br />AM</td>
                    <td style="width:4%;">2<br />AM</td>
                    <td style="width:4%;">3<br />AM</td>
                </tr>
            </table>
            </script>


    And here is my javascript code:

    <script>
     
    var parkId = 0;
     
     function mobileListViewDataBindInit(e) {
                    //$("#datepicker").kendoDatePicker({
                    //    value: new Date(),
                    //    change: function () { mobileListViewDataBindInit(e); }
                    //});
     
                    //var datepicker = $("#datepicker").data("kendoDatePicker");
                    var date = new Date('3/29/2014');// datepicker.value();
                    var month = date.getMonth() + 1;
     
                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://localhost/AttendanceMonitorServices/AtmonService.svc/GetAllData",
                                contentType: "application/json; charset=utf-8",
                                data: { selectedDate: month + '/' + date.getDate() + '/' + date.getFullYear() }
                            }
                        },
                        requestStart: function () {
                            kendo.ui.progress($("#summary"), true);
                        },
                        requestEnd: function (result) {
                            kendo.ui.progress($("#summary"), false);
                            BindAllData(result);
                        },
                        change: function (e) {
     
                        }
                    });
                    dataSource.read();
                }
     
                function click(e) {
                    var data = e.button.data();
                    var date = new Date('3/29/2013');// datepicker.value();
                    var month = date.getMonth() + 1;
                    parkId = data.parkid;
                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://localhost/AttendanceMonitorServices/AtmonService.svc/GetHourlyData",
                                contentType: "application/json; charset=utf-8",
                                data: {
                                    selectedDate: month + '/' + date.getDate() + '/' + date.getFullYear(),
                                    parkID: parkId
                                }
                            }
                        },
                        requestStart: function () {
                            kendo.ui.progress($("#hourly"), true);
                        },
                        requestEnd: function (result) {
                            kendo.ui.progress($("#hourly"), false);
                            BindHourlyData(result);
                        },
                        change: function (e) {
     
                        }
                    });
                    dataSource.read();
                }
     
                function acumclick(e) {
     
                    var date = new Date('3/29/2013');// datepicker.value();
                    var month = date.getMonth() + 1;
     
                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://localhost/AttendanceMonitorServices/AtmonService.svc/GetCumulativeData",
                                contentType: "application/json; charset=utf-8",
                                data: {
                                    selectedDate: month + '/' + date.getDate() + '/' + date.getFullYear(),
                                    parkID: parkId
                                }
                            }
                        },
                        requestStart: function () {
                            kendo.ui.progress($("#accum"), true);
                        },
                        requestEnd: function (result) {
                            kendo.ui.progress($("#accum"), false);
                            BindAccumData(result);
                        },
                        change: function (e) {
     
                        }
                    });
                    dataSource.read();
                }
     
                function BindAllData(result) {
                    var d = eval(result.response.GetAllDataResult);
                    $("#summarylistview").kendoMobileListView({
                        dataSource: d,
                        template: $("#summaryTemplate").html(),
                        pullToRefresh: true
                    });
                }
     
                function BindHourlyData(result) {
                    var d = eval(result.response.GetHourlyDataResult);
                    $("#hourlylistview").kendoMobileListView({
                        template: $("#hourlyTemplate").html(),
                        headerTemplate: $("#hourlyHeaderTemplate").html(),
                        pullToRefresh: true,
                        dataSource: kendo.data.DataSource.create({ data: d })
                    });
                }
    </script>

    You may note, also, that I had to create a binding function to bind to the list, because I could not just set the datasource like shown in the demos. I had to get the JSON object and parse it and then bind it to the listview. Regardless of that issue, my BIG issue is that the headerTemplate is never shown. Cannot I just have HTML in the template? Or does it have to reference some value from the datasource in order to get it to bind?

    Any help is much appreciated. I've been fighting with this issue for quite a few hours now.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 01 Apr 2014 Link to this post

    Hello Sean,

    In order for the listview to display headers in databound mode, the datasource should be grouped - just like this demo.

    kendo.data.DataSource.create({data: groupedData, group: "letter"})


    Regards,
    Petyo
    Telerik
     
    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