Binding to local JSON file on mobile

4 posts, 0 answers
  1. Jeffrey
    Jeffrey avatar
    9 posts
    Member since:
    Apr 2014

    Posted 26 Jun 2014 Link to this post

    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.
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 26 Jun 2014 Link to this post

    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
     
    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
  4. Jeffrey
    Jeffrey avatar
    9 posts
    Member since:
    Apr 2014

    Posted 26 Jun 2014 in reply to Kiril Nikolov Link to this post

    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.
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 26 Jun 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready