Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Mobile List View Header Templates

1 Answer 300 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 30 Mar 2014, 06:09 AM
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.

1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 01 Apr 2014, 11:29 AM
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!
 
Tags
ListView (Mobile)
Asked by
Sean
Top achievements
Rank 2
Answers by
Petyo
Telerik team
Share this question
or