Basim Sherif
Basim Sherif

Reputation: 5440

json data binding in kendo ui mobile listview

I am developing a mobile app using Kendo ui mobile and Phonegap.I have a JSON data, Here . I want to bind this JSON to kendo ui mobile listview. I have tried following code, but its not working. It not even showing the listview. Can anyone please help me? Thanks.

function mobileListViewEndlessScrolling() {


        var dataSource = new kendo.data.DataSource({
                serverFiltering: true,
                transport      : {
                    read: {
                        type       : "GET",
                        url        : "http://www.json-generator.com/j/bZnjoTdIuq?indent=4",
                        contentType: "application/json; charset=utf-8",
                        dataType   : "json",
                        error      : function (xhr, ajaxOptions, thrownError) {
                            alert("error " + xhr.responseText);
                        }
                    }
                },
                schema         : {
                    data: "Data"
                },
                type           : "json",
                parameterMap   : function (options) {
                    return JSON.stringify(options);
                }
            });




            $("#endless-scrolling").kendoMobileListView({
                dataSource: dataSource,
                template: $("#endless-scrolling-template").text(),
                endlessScroll: true
            });
        }

and here is my listview item template,

<script type="text/x-kendo-tmpl" id="endless-scrolling-template">



<div class="product">

    <img src="images/image.jpg" alt="#=ProductName# image" class="pullImage"/>
    <h3>#:ProductName#</h3>
    <p>$#:kendo.toString(UnitPrice, "c")#</p>
    <a id="minus" data-role="button" onclick="minus(#:ProductID#)" >-</a>
    <label id=#:ProductID#>0</label>
   <a id="plus" data-role="button" onclick="plus(#:ProductID#)" >+</a>

    <a id="loginButton" data-role="button" data-click="login">Add to Cart</a>
    <div class="console"></div>

</div>

Upvotes: 1

Views: 2217

Answers (1)

Basim Sherif
Basim Sherif

Reputation: 5440

I have solved the issue. I had to remove the line endlessScroll: true I dont know why its not working with that line included.

Upvotes: 1

Related Questions