[Solved] Read Odata

[Suvidha]

                    17 Dec 2012

 
I was trying to have a dropdown (using AutoCompleteBox) of all the Movie titles from Netflix (Odata source).

Below code in default.html is not working!! Please let me know where I am going wrong!!
 

17 Dec 2012

var ds = new Telerik.Data.DataSource({
 type: "odata",
 transport: {
 read: http://odata.netflix.com/v2/Catalog/People
 },
 schema: { data: "Name" }
 });

comboBox.dataSource = ds; ds.read();

Thanks.

[Tsvetina]

Hi Suvidha,

There are two way to achieve your requirement. First one is as you tried to do - create the RadAutoCompleteBox and DataSource separately. However, you would need a few adjustments to get this to work:

1) The location of the service should be specified in the url property of the read options.
2) In schema.data you should actually specify which field of the response contains the data items, in the case of this service, it would be "d.results". You can see this by opening the following link in your browser to take a look at the JSON response:
http://odata.netflix.com/v2/Catalog/People?$format=json
3) Also, to get the autocomplete to bind to the results returned by the DataSource, you should assign the datasource itself to it and you should call autocomplete.refresh(). Note that the read() method returns a promise, which cannot be directly assigned as a datasource to the autocomplete.

So, a working example would be this one:

var autoComplete2 = new Telerik.UI.RadAutoCompleteBox(document.getElementById("myAutoComplete2"), {
    dataTextField: "Name"
});

var ds = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "http://odata.netflix.com/v2/Catalog/People",
            dataType: 'json'
        }
    },
    schema: {
        data: "d.results"
    }
});
ds.read().then(function () {
    autoComplete2.dataSource = ds;
    autoComplete2.refresh();
});

However, a much shorter implementation would be to define the DataSource options inside the RadAutoComplete itself. Note that the dataSource property of our data-bound controls is of type DataSource, so you can directly use this syntax:

var autoComplete = new Telerik.UI.RadAutoCompleteBox(document.getElementById("myAutoComplete"), {
    dataTextField: "Name",
    dataSource: {
        transport: {
            read: {
                url: "http://odata.netflix.com/v2/Catalog/People",
                dataType: 'json'
            }
        },
        schema: {
            data: "d.results"
        }
    }
});

In this case RadAutoCompleteBox will invoke the read() method of the DataSource, when needed and you do not need to do anything else in relation to data-binding.

Most of the above information is provided in the DataSource and RadAutoCompleteBox Configuration help articles, so in case you are interested in getting more details, check them out.

Regards,
Tsvetina
the Telerik team

[Suvidha]

Thank you very much :)

[B.Zhelyazkov]

Thank you for the post. :)