How to use DataSource (CRUD) on local JSON data

5 posts, 1 answers
  1. Siddu
    Siddu avatar
    7 posts
    Member since:
    Dec 2012

    Posted 12 Jan 2013 Link to this post

     I am using DataSource for Kendo Template listview, but Unable to read data from list.json 


    dataSource = new kendo.data.DataSource({
                        transport:{
                         read: lists.json
                            }
                    });

             dataSource.read();
                var listView = $("#listView").kendoMobileListView({
                    dataSource: dataSource,
                    template: kendo.template($("#template").html()),
                    
                });

    and
    list.json:
    [
    {"name":"Customer0","address1":"0 Winding River Lane"},
    {"name":"Customer1","address1":"1 Winding River Lane"},
    {"name":"Customer10","address1":"10 Winding River Lane"},
    {"name":"Customer100","address1":"100 Winding River Lane"}
    ]


    guide me to know the problem.. thanks in advance.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 15 Jan 2013 Link to this post

    Hello Siddu,

    If I understood correctly you would like to read the data from a local JSON file, which is different from using local data (JavaScript array).

    In that case you should specify the JSON file path as a URL of the read transport. If we assume that the lists.json file is located at the same folder as your index page, the configuration should look like the following:
    <div id="home" data-role="view">
        <ul id="list" data-role="listview" data-source="dataSource" data-template="tmp"></ul>
    </div>
    <script id="tmp" type="text/x-kendo-template">
        #: name # || #: address1 #
    </script>
    <script>
        var app = new kendo.mobile.Application();
         
        var dataSource = new kendo.data.DataSource({
            transport:{
                read: "lists.json"
            }
        });
    </script>

    I hope this will help.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Siddu
    Siddu avatar
    7 posts
    Member since:
    Dec 2012

    Posted 18 Jan 2013 Link to this post

    Thank for reply Alexander. it's working as a charm.

    But I have got another issue i.e would like to update or delete on Mobile ListView.

    should I use kendo.model and schema for this issue? 




  4. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 21 Jan 2013 Link to this post

    Hi Siddu,

    To achieve this you should use the DataSource API methods. Also each record should have unique ID field which is defined in the DataSource's model.
    Please check this sample project - it demonstrates how to implement create/delete operations with mobile ListView, DataSource and MVVM.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Siddu
    Siddu avatar
    7 posts
    Member since:
    Dec 2012

    Posted 21 Jan 2013 Link to this post

    Thank You Alexander, Sample Project works pretty good. Need to work more on it.

    Once again Thanks for quick reply.
Back to Top