load More...

11 posts, 0 answers
  1. Jun
    Jun avatar
    30 posts
    Member since:
    May 2013

    Posted 20 Mar 2014 Link to this post

    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




  2. Jun
    Jun avatar
    30 posts
    Member since:
    May 2013

    Posted 21 Mar 2014 Link to this post

    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>
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 21 Mar 2014 Link to this post

    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.

     
  5. Jun
    Jun avatar
    30 posts
    Member since:
    May 2013

    Posted 23 Mar 2014 in reply to Petyo Link to this post

    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

  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Mar 2014 Link to this post

    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.

     
  7. Jun
    Jun avatar
    30 posts
    Member since:
    May 2013

    Posted 25 Mar 2014 in reply to Petyo Link to this post

    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 .
  8. Jun
    Jun avatar
    30 posts
    Member since:
    May 2013

    Posted 26 Mar 2014 in reply to Petyo Link to this post


    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.

  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 26 Mar 2014 Link to this post

    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.

     
  10. Jun
    Jun avatar
    30 posts
    Member since:
    May 2013

    Posted 26 Mar 2014 in reply to Petyo Link to this post

    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>
  11. Jun
    Jun avatar
    30 posts
    Member since:
    May 2013

    Posted 26 Mar 2014 in reply to Jun Link to this post

    I Added LoadMore in this source
  12. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 28 Mar 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready