How To Use Transport/Read of Datasource?

[Steven]

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 }
]

[Kiril Nikolov]

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.

[Steven]

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?

[Steven]

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

[Kiril Nikolov]

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.