My mobile listview worked correctly when I had my datasource embedded in the JS on the page, but when I tested using the exact same dataSource on a seperate json file the application breaks saying "Uncaught TypeError: Cannot read property 'type' of undefined" in the Simulator debugger.
Here is the html
And here is my Javascript
Here is the JSON File:
I have tried several different things and have gotten errors all revolving around "uncaught TypeError" and I can't figure out what I am doing wrong. Please help.
P.S I did have kendo.parseDate() for the "day" and then I used kendo.toString() to set the template title to be the Month and day and that all worked fine with the embedded dataSource as well. I took it off for this question.
Here is the html
01.
<!--Workshops page-->
02.
<
div
data-title
=
"Workshops"
data-role
=
"view"
data-source
=
"groupedData"
id
=
"listview-templates"
data-init
=
"workshopListViewTemplatesInit"
>
03.
<
header
data-role
=
"header"
>
04.
<
div
data-role
=
"navbar"
>
05.
<
a
href
=
"#"
data-rel
=
"back"
data-align
=
"left"
data-icon
=
"arrow-w"
data-transition
=
"slide"
>Back</
a
>
06.
<
span
data-role
=
"view-title"
></
span
>
07.
</
div
>
08.
</
header
>
09.
<
ul
id
=
"custom-listview"
></
ul
>
10.
</
div
>
11.
12.
<
script
type
=
"text/x-kendo-template"
id
=
"workshopListViewTemplate"
>
13.
<
h3
class
=
"item-title"
>#:name# <
u
>#:time#</
u
> Room #:room#</
h3
>
14.
<
p
class
=
"item-info"
>#:title#</
p
><
br
>
15.
<
p
class
=
"item-info2"
>*#:track#* #:code#</
p
>
16.
<!--MAY WANT TO ADD A VIBRATE ALERT FOR THE APP-->
17.
<!--<a data-role="button" class="details-link">Alert Me</a>-->
18.
</
script
>
And here is my Javascript
01.
<script>
02.
function
workshopListViewTemplatesInit() {
03.
var
groupedData =
new
kendo.data.DataSource ({
04.
transport: {
05.
read: {
06.
url:
"workshops.json"
,
07.
dataType:
"json"
08.
}
09.
}
10.
});
11.
$(
"#custom-listview"
).kendoMobileListView({
12.
dataSource: kendo.data.DataSource({
13.
data: groupedData,
14.
group:
"day"
,
15.
}),
16.
template: $(
"#workshopListViewTemplate"
).html(),
17.
headerTemplate:
"<h2>#:(value)#</h2>"
18.
});
19.
}
20.
</script>
1.
<script>
2.
var
app =
new
kendo.mobile.Application(document.body);
3.
</script>
Here is the JSON File:
01.
[
02.
{
03.
"name"
:
"Ben Lee"
,
04.
"title"
:
"Preaching to the Whole Brain: Why the Right-Brain Can No Longer Be Ignored"
,
05.
"track"
:
"UCRO: Intentional Leadership Development"
,
06.
"day"
:
"2/22/2014"
,
07.
"time"
:
"11:00am - noon"
,
08.
"room"
:
"208"
,
09.
"code"
:
"1"
10.
},
11.
{
12.
"name"
:
"Phil Fuller"
,
13.
"title"
:
"Steps toward Longevity in Ministry"
,
14.
"track"
:
"UCRO: Intentional Leadership Development"
,
15.
"day"
:
"2/22/2014"
,
16.
"time"
:
"11:00am - noon"
,
17.
"room"
:
"210"
,
18.
"code"
:
"2"
19.
}
20.
]
I have tried several different things and have gotten errors all revolving around "uncaught TypeError" and I can't figure out what I am doing wrong. Please help.
P.S I did have kendo.parseDate() for the "day" and then I used kendo.toString() to set the template title to be the Month and day and that all worked fine with the embedded dataSource as well. I took it off for this question.