ListView and DataSource

[Vaidas]

I cannot understand how this works. Basically, I have problem of displaying ListView from dataSource.

Html (view which references template):

<div id="index"
         data-title="My Kendo sushi" data-role="view"  data-layout="default"
         data-show="showMenuView"
            >
        <ul id="featured" class="item-list"
            data-role="listview"
            data-template="menuTemplate"
            data-source="ds"
            data-auto-bind="false"
                >
        </ul>
    </div>


    <script id="menuTemplate" type="text/x-kendo-template">
        #= ProductName #
    </script>

var app;

var schema = {
    data: "",
    model: {}
};

var ds = new kendo.data.DataSource({
    schema: schema,
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/products",
            dataType: "jsonp",
            type: "GET"
        }
    },
    group: "category",
    error: function() { console.log(arguments); }
});

var featured = new kendo.data.DataSource({
    schema: schema,
    filter: {
        field: "featured",
        operator: "eq",
        value: true
    }
});

ds.bind("change", function() {
    console.log(schema.data);
    console.log(ds.data());
    featured.data(ds.data());
});

ds.fetch();

app = new kendo.mobile.Application($(document.body), { transition: "slide" });

And list is never populated. However request was successful and on ds.bind("change" ...) prints all data.

When I change those two lines:
url: "http://demos.kendoui.com/service/products",
dataType: "jsonp", 

With lines from Sushi example (having that file in system) - everything works:
url: "content/menu.json",
dataType: "json",

I am completely lost why it is not working in my case...

[Alexander Valchev]

Hi Vaidas,

Thank you for contacting us. Your code is working fine on my side. Could you please review my test page and let me know what I am missing?

• http://jsbin.com/azomic/2/edit
  
  

I removed the group: "category" option because the data does not contain a category field.

Regards,
Alexander Valchev
Telerik

[Vaidas]

Hi,

Thanks for response. It seems that these lines make difference:

Not working:

read: function (options) {
    $.ajax({
        url: "http://demos.kendoui.com/service/products",
        type: "GET",
        dataType: "jsonp"
    });
}

Working:

read: {
    url: "http://demos.kendoui.com/service/products",
    dataType: "jsonp",
    type: "GET"
}

It would be interesting to understand why it is so, considering that in both cases results are retrieved, but only binding is not working in first one.

Thanks.

[Alexander Valchev]

Hello Vaidas,

In the non-working version, you are using custom read transport. In order to mark the read operation as successful you have to hook up to the success event of the ajax request and pass the response to the options.success method. Please check the 3rd code snippet from transport.read API reference.

• http://docs.kendoui.com/api/framework/datasource#configuration-transport.read

Second version uses the build-in remote transport of the DataSource which is why the aforementioned steps happen out-of-the-box.

Regards,
Alexander Valchev
Telerik