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

load More...

10 Answers 118 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Jun
Top achievements
Rank 1
Jun asked on 20 Mar 2014, 07:17 AM
http://demos.telerik.com/kendo-ui/mobile/listview/press-to-load-more.html   : listview loadmore

1.Setting
loadmore(false) . pagesize(20)

***Result is exact match.

2. setting
loadmore(true) . pagesize(20)

***Result is not match.

please See VideoFile

Sorry, I am not good at english.

It's hard to learng KendoMobileMVC. 


file link :

http://blogattach.naver.com/fe6be257407574c4e5096e5c6082f986237580c0/20140320_191_blogfile/bak4500_1395299727774_rYMlbD_zip/erroravi.zip




10 Answers, 1 is accepted

Sort by
0
Jun
Top achievements
Rank 1
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>
0
Petyo
Telerik team
answered on 21 Mar 2014, 05:11 PM
Hello Jun,

I am not sure that I understand the problem you describe. The demo you have linked to seems to work fine on my side. The link from your initial post returns 404 when requested. As a general advice, please check the specifics of the listview virtual mode described in our documentation. Perhaps this note: 

The amount of actual DOM elements used in virtual mode is equal to half of the datasource page size option.

 
is the problem you encounter. 

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.

 
0
Jun
Top achievements
Rank 1
answered on 24 Mar 2014, 04:31 AM
Please Check Video

please watch carefully
1. Data Change
2. Data LoadIng

http://serviceapi.nmv.naver.com/flash/convertIframeTag.nhn?vid=BEBA7444AA67501C71C064BAEDD96BED6A22&outKey=V12521990801b42295c798880c6dfa2b1982af5d4f535acfcc2ae8880c6dfa2b1982a&width=720&height=438

0
Petyo
Telerik team
answered on 25 Mar 2014, 02:15 PM
Hi Jun,

Please read the documentation I linked in my previous reply. A page size of 10 is not enough for the virtual scrolling mode to work as expected, as it has only 5 items to swap.

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.

 
0
Jun
Top achievements
Rank 1
answered on 25 Mar 2014, 03:48 PM
Thank you very much

I have another question.
When returning less than 10 datas, if I configure it as a page size of 30, is it likely to occur errors?

Sorry, I'm not good at English .
0
Jun
Top achievements
Rank 1
answered on 26 Mar 2014, 12:58 PM

I've tested about previous question.
When there are about 20 returned datas, it occur errors althought I configure page size as 30.
I've been in trouble since over past 2 weeks because I really want to work with  KemdoUi Mobile.
But finally I selected to work with jquery mobile.
In case of jquery mobile, it took an hour.
I think KendoMobile is more difficult and have many bugs than JqueryMobile.

0
Petyo
Telerik team
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.

 
0
Jun
Top achievements
Rank 1
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>
0
Jun
Top achievements
Rank 1
answered on 26 Mar 2014, 03:32 PM
I Added LoadMore in this source
0
Petyo
Telerik team
answered on 28 Mar 2014, 09:08 AM
Hello Jun,

The virtual scrolling mode does not support grouping and fixed headers - this is described in the documentation I linked to. In addition to that, the datasource you have has local data but server paging configuration option set, which is an invalid configuration.

In case you want to virtualize local data, I would like to suggest that you start from this working demo

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.

 
Tags
ListView (Mobile)
Asked by
Jun
Top achievements
Rank 1
Answers by
Jun
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or