ListView and DataSource

4 posts, 0 answers
  1. Vaidas
    Vaidas avatar
    3 posts
    Member since:
    Apr 2013

    Posted 06 Jun 2013 Link to this post

    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...















  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Jun 2013 Link to this post

    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?
    I removed the group: "category" option because the data does not contain a category field.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Vaidas
    Vaidas avatar
    3 posts
    Member since:
    Apr 2013

    Posted 13 Jun 2013 Link to this post

    Hi,

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

    Not working:
    read: function (options) {
        $.ajax({
            type: "GET",
            dataType: "jsonp"
        });
    }

    Working:
    read: {
        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.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 Jun 2013 Link to this post

    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.

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready