kendoMobileListView - Dynamic databinding with jSon

Question

http://demos.telerik.com/kendo-ui/mobile/listview/pull-with-endless.html refering this demo we are creating kenolistview for our mobile application.

we are getting data form webapi in jSon, whend we try to bind data with list view it's giving errors we tried three methods but all are not working, please find code bellow and error bellow code.

<body>
<div data-role="view" data-init="mobileListViewPullWithEndless" data-title="Pull to refresh">
    <header data-role="header">
    <div data-role="navbar">
        <span data-role="view-title"></span>
        <a data-align="left" data-icon="add" data-role="button"  data-rel="modalview" href="#modalview-add"></a>
        <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
    </div>
</header>
    <ul id="pull-with-endless-listview">
    </ul>
</div>
<div data-role="modalview" id="modalview-add" style="width: 95%; height: 12em;">
    <div data-role="header">
        <div data-role="navbar">
            <span>Add Product</span> <a data-click="closeModalViewAdd" data-role="button" data-align="right">
                Cancel</a>
        </div>
    </div>
    <ul data-role="listview" data-style="inset">
        <li>
            <label for="username">
                Product Category:</label>
            <input type="text" id="name" /></li>
    </ul>
    <a data-click="addNew" class="addNew" type="button" data-role="button">Add New Product</a>
</div>
<script type="text/x-kendo-tmpl" id="pull-with-endless-template">
<div class="product-item">
    <h3>#:CatName#</h3>

</div>
</script>
<script>
    function mobileListViewPullWithEndless(e) {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://mydomain.com/api/homescreenapp/36/8c177908-be9f-4474-b036-43e8cef736b5/345/800/web",
                    dataType: 'JSON'                       
                }
            },
            serverPaging: true,
            pageSize: 2                 
        });

        $("#pull-with-endless-listview").kendoMobileListView({
            dataSource: dataSource,
            template: $("#pull-with-endless-template").text(),
            pullToRefresh: true,
            endlessScroll: true
        });

        $("#addNew").click(function () {
            loader.show();
            addProductDataSource.add({
                ProductName: $("#name").val(),
                UnitPrice: Math.floor((Math.random() * 10) + 1)
            });
        });
    }

    function closeModalViewAdd() {
        $("#modalview-add").kendoMobileModalView("close");
    }

    function addNew() {
        addProductDataSource.add({
            ProductName: $("#name").val(),
            UnitPrice: Math.floor((Math.random() * 10) + 1)
        });

        closeModalViewAdd();
    }

    var addProductDataSource = new kendo.data.DataSource({
        transport: {
            create: {
                url: " http://mydomain.com/api/homescreenapp/36/8c177908-be9f-4474-b036-43e8cef736b5/345/800/web",
                dataType: "jsonp"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { type: "string" }
                }
            }
        },
        autoSync: true,
        batch: true,
        requestEnd: function () {
            $("#name").val("");
        }
    });
</script>
<script>
    window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>

We are getting following jSon response from our webapi

{"Categories":[{"CategoryId":"305","CatName":"Clothing","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345webMan&woman.jpg","MapUrlRewrite":"Clothing"},{"CategoryId":"306","CatName":"Shoes","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web2.jpg","MapUrlRewrite":"Shoes"},{"CategoryId":"307","CatName":"Handbags","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web3.jpg","MapUrlRewrite":"Handbags"},{"CategoryId":"308","CatName":"Accesories","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web4.jpg","MapUrlRewrite":"Accesories"},{"CategoryId":"309","CatName":"Luggage","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web5.jpg","MapUrlRewrite":"Luggage"},{"CategoryId":"310","CatName":"Jewellery","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web6.jpg","MapUrlRewrite":"Jwellery"},{"CategoryId":"344","CatName":"Eye Wear","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web7.jpg","MapUrlRewrite":"Eye-Wear"},{"CategoryId":"345","CatName":"Watches","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web8.jpg","MapUrlRewrite":"Top-Brands"},{"CategoryId":"346","CatName":"Hot Brands","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345webHot_Brands.jpg","MapUrlRewrite":"Hot-Deals--Offers"}],"HomeBannerImages":[{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webBanner_1.jpg","BannerTitle":"Banner Clothing","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webshoes-banner_2.jpg","BannerTitle":" shoes banner","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webhandbag-banner1.jpg","BannerTitle":"handbag ","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webLuggage_2.jpg","BannerTitle":"Laggege","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webjewelry_2.jpg","BannerTitle":"jewelry","BannerDescription":"","CategoryId":null}],"CustomerLogo":"http://mydomailn.com/iconnect/Images/eapparelCustomerLogo12.png"}

Code and Error :

With above code if we bind kendoMobileListView we are getting error "Uncaught SyntaxError: Unexpected token"
if we use dataType: “json” instead of dataType: “jsonp”, I am getting error like "Uncaught TypeError: Cannot call method 'slice' of undefined"
If we use dataType: “json” instead of dataType: “json array”, it is not displaying anything in listing and even in error. It mean all things will be blank.
We have gone through with all below parameter. But still not getting any success.

dataType: 'JSONP', jsonpCallback: 'jsonCallback', type: 'GET', async: false, crossDomain: true

Please guide me on this issue, I need to bind only Category name in the list. FYI : i cann't change webapi response as it's being used by other services of client.

Thanks, Ashish

score 0 · Answer 1 · answered Jul 10 '14 at 21:08

Kendo expects the server to return a JSON array. In your case it returns an object with a Categories property where the data array is stored. You need to tell the Kendo DataSource to pull the data from .Categories using the schema.data configuration option.

... = new DataSource({
    ...
    schema: {
        data: "Categories"
    }
});

kendoMobileListView - Dynamic databinding with jSon

1 Answers1