How To Use Transport/Read of Datasource?

5 posts, 0 answers
  1. Steven
    Steven avatar
    7 posts
    Member since:
    Nov 2013

    Posted 09 Dec 2013 Link to this post

    I have the following code below that works correctly -

        <script>
            var obs = new kendo.data.ObservableObject({
                 
                dataSource: new kendo.data.DataSource({
                    data: [
                        { name: "Jane Doe", age: 30 },
                        { name: "John Doe", age: 33 }
                    ]
                })
            });
     
        </script>
         
        <script id="tmp" type="text/x-kendo-template">
            <p>#: name # <span>Age: #: age #</span></p>
        </script>
     
    <!-- html -->
    <ul id="list" data-role="listview" data-source="obs.dataSource" data-template="tmp"></ul>

    However, when I move the array to its own page and add the read/transport, nothing loads in.

    <script>
            var obs = new kendo.data.ObservableObject({
                 
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "obs.json",
                            dataType: "json"
                        }
                    }
                })
            });
     
        </script>
         
        <script id="tmp" type="text/x-kendo-template">
            <p>#: name # <span>Age: #: age #</span></p>
        </script>
     
    <!-- html -->
    <ul id="list" data-role="listview" data-source="obs.dataSource" data-template="tmp"></ul>
     
    <!-- obs.json file -->
    [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
    ]
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 12 Dec 2013 Link to this post

    Hi Steven,

    The Kendo UI DataSource is an observable object itself, so I am not sure what is the point of putting it inside of another observable object. However if you want to create local transport function, you will need to use the success() method of the read option to read the array of data. Please check the following example:

    http://jsbin.com/urIVeWA/1/edit

    Regards,
    Kiril Nikolov
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Steven
    Steven avatar
    7 posts
    Member since:
    Nov 2013

    Posted 12 Dec 2013 Link to this post

    Perhaps I didn't explain it well.

    I am trying to read the data from a separate file into my datasource object.  The example you have still has the data array hardcoded into the object itself.  In other words, I will have a backend process that will generate text files of data.  I want to be able to put those data files (JSON) into my app and read it from my datasource as opposed to hard coding it into my datasource.

    The first question I am open to input.  My plan was to have a view model for each view - one to one.  If the view were say a form, then I might have a drop down list of states and some other options.  I would think my view model (kendo.data.ObservableObject) would contain properties for form fields, welcome messages and such, but that it could also contain one or more datasources that populate the drop down lists.  Does that make sense?
  4. Steven
    Steven avatar
    7 posts
    Member since:
    Nov 2013

    Posted 12 Dec 2013 Link to this post

    I tried a variation on it - I removed the outer object and cut and pasted code from examples in the data source section of the API. 

    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "obs.json",
                dataType: "json"
            }
        }
    });
    var products = dataSource.data();
    console.log(products[0].name);

    This doesn't work either, although, it was largely cut and paste.  Debugger says 'dataSource is not defined'????

    Thanks again,
    Steve
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 13 Dec 2013 Link to this post

    Hello Steven,

    If you want to use an external json file, than you will need to provide valid JSON, as you are currently using JavaScript objects, but they are not valid JSON objects. You can use jsonlint to validate your data. 

    What I mean that in your case the keys in the files need to be placed inside quotes:

    [
        {
            "name": "Jane Doe",
            "age": 30
        },
        {
            "name": "John Doe",
            "age": 33
        }
    ]


    Please check it out and let me know if it helps.

    Regards,
    Kiril Nikolov
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
Back to Top