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:
And here is my javascript code:
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.
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: {
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: {
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: {
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.