Binding to local JSON file on mobile

[Jeffrey]

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

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.

[Kiril Nikolov]

Hi Jeffrey,

The problem comes from the fact that you are initializing a dataSource from already created dataSource. Please check this updated example, and let me know if it helps:

http://jsbin.com/zecepodu/3/edit

Regards,
Kiril Nikolov
Telerik

 

 

[Jeffrey]

Thank you. It definitely helps to get a second pair of eyes. I had been looking at the code for quite a while and didn't see that. It is working well now.

[Kiril Nikolov]

Hi Jeffrey,

I am glad to hear that I helped.

In case you have any further questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik