This is a migrated thread and some comments may be shown as answers.

load More...

10 Answers 299 Views

ListView (Mobile)

This is a migrated thread and some comments may be shown as answers.

10 Answers, 1 is accepted

answered on 21 Mar 2014, 05:52 AM

Too many Bugs Kendo Mobile.

http://demos.telerik.com/kendo-ui/mobile/listview/press-to-load-more.html : listview loadmore source
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.226/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.226/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.226/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.226/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.226/js/kendo.all.min.js"></script>
</head>
<body>
    <div data-role="view" data-init="mobileListViewPressToLoadMore" data-title="My Menu">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
            </div>
        </header>        <ul id="load-more"></ul>
    </div>    <script type="text/x-kendo-tmpl" id="load-more-template">
        <div class="product">
            <img src="../../content/web/foods/#=ProductID#.jpg" alt="#=ProductName# image" class="pullImage" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>    <script>
        function mobileListViewPressToLoadMore() {
            var dataSource = new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: {
                        url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                    }
                },
                serverPaging: true,
                pageSize: 20
            });            $("#load-more").kendoMobileListView({
                dataSource: dataSource,
                template: $("#load-more-template").text(),
                loadMore: true
            });
        }
    </script>    <style scoped>
        .product h3 {
            font-size: 1.3em;
            line-height: 1.4em;
            margin: 0;
            padding: 0;
            height: 1.3em;
            overflow: hidden;
        }        .product p {
            font-size: 1em;
            margin: 0;
            padding: .3em 0 0;
        }        .pullImage {
            width: 64px;
            height: 64px;
            border-radius: 3px;
            float: left;
            margin-right: 10px;
        }
    </style>
    <script>
        var app = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>

answered on 26 Mar 2014, 03:00 PM

Hi Jun,

I fully understand the troubles you are facing - configuring an endless scrolling listview has several non-trivial aspects (like the datasource paging for example).

As you have stated in your last reply, the ListView expects that the correct item amount will be returned from the server. Of course, if you have a total of 20 items, the service will return 20, even if page size is set to 30. The total amount of the items available should be configured through the schema.total datasource configuration option.

Regards,
Petyo
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

answered on 26 Mar 2014, 03:31 PM

I tested  :   http://trykendoui.telerik.com/eREf

I find bug.

what is my mistake?

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/mobile/listview/databinding.html">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
    <div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" data-layout="databinding">
    <ul id="flat-listview"></ul>
</div><div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped" data-transition="" data-title="ListView" data-layout="databinding">
     <ul id="grouped-listview"></ul>
</div><div data-role="layout" data-id="databinding">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
        </div>
    </header>    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#flat" data-icon="stop">Flat
            </a><a href="#grouped" data-icon="organize">Grouped</a>
        </div>
    </div>
</div><script>
    var groupedData = [
        {name: "Sashimi salad", letter: "S" },
        {name: "Chirashi sushi", letter: "C" },
        {name: "Seaweed salad", letter: "S" },
        {name: "Edamame", letter: "E" },
        {name: "Miso soup", letter: "M" },
        {name: "Maguro", letter: "M" },
        {name: "Shake", letter: "S" },
        {name: "Shiromi", letter: "S" },
        {name: "Tekka maki", letter: "T" },
        {name: "Hosomaki Mix", letter: "H" },
        {name: "California rolls", letter: "C" },
        {name: "Seattle rolls", letter: "S" },
        {name: "Spicy Tuna rolls", letter: "S" },
        {name: "Ebi rolls", letter: "E" },
        {name: "Chicken Teriyaki", letter: "C" },
        {name: "Salmon Teriyaki", letter: "S" },
        {name: "Gohan", letter: "G" },
        {name: "Tori Katsu", letter: "T" },
        {name: "Yaki Udon", letter: "Y" }
    ];
    var flatData = [ "Sashimi salad", "Chirashi sushi", "Seaweed salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki", "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon" ];    function mobileListViewDataBindInitFlat() {
        $("#flat-listview").kendoMobileListView({ dataSource: flatData });
    }    function mobileListViewDataBindInitGrouped() {
        $("#grouped-listview").kendoMobileListView({
            dataSource: kendo.data.DataSource.create(
              {
                data: groupedData
                , group: "letter",
                 serverPaging: true,
            pageSize: 30              }),
            template: "${name}",
            fixedHeaders: true,
          loadMore: true        });
    }
</script>
<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>