Displaying JSON data from wcf service call

[JD]

I am trying to set up a demo using the listview in kendoui and having some issues with it., I have the following code below, and when it runs the first time round. It loads in the first 20 items, but when I click on the button again, the button disappears and nothing happens on the page. Just sits there and does nothing, this code is based on the following.

http://demos.kendoui.com/mobile/listview/press-to-load-more.html

Any help you can give on this would be appreciated.

<%@ Page Title="" Language="C#" MasterPageFile="~/mobile.master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

 

 <div data-role="view" data-init="mobileListViewPressToLoadMore" data-title="Patient List">

    <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">Index</a>

        </div>

    </header>

 

    <ul id="load-more"></ul>

</div>

 

<script>

    function mobileListViewPressToLoadMore() {

        var dataSource = new kendo.data.DataSource({

            pageSize: 20,

            serverPaging: true,

            transport: {

                read: {

                    url: "http://myservices/rest/plan.svc/Patient" // the remove service url

                     

                     

                },

 

       parameterMap: function(options) {

                        var parameters = {

                            q: "javascript", //additional parameters sent to the remote service

                            rpp: options.pageSize,

                            page: options.page //next page

                        };

 

                        return parameters;

                    }

                    },  schema: { // describe the result format

                data: "" // the data which the data source will be bound to is in the "results" field

            }

        });

 

        $("#load-more").kendoMobileListView({

            dataSource: dataSource,

            template: $("#load-more-template").text(),

            loadMore: true

        });

 

    }

</script>

 

<script id="load-more-template" type="text/x-kendo-template">

    <div class="tweet">

         

        <div class="metadata">

            <a class="sublink" target="_blank" href="http://#= id #" rel="nofollow">#= first_name + ' ' + last_name #</a>

            |

            <a class="sublink" href="http://#= mrn #" rel="nofollow">#= pat_seqno #</a>

        </div>

    </div>

</script>

 

<style scoped>

    .tweet {

        font-size: .8em;

        line-height: 1.4em;

    }

    .pullImage {

        width: 64px;

        height: 64px;

        border-radius: 3px;

        float: left;

        margin-right: 10px;

    }

    .sublink {

        font-size: .9em;

        font-weight: normal;

        display: inline-block;

        padding: 3px 3px 0 0;

        text-decoration: none;

        opacity: .8;

    }

</style>

 

</asp:Content>

[Alexander Valchev]

Hi JD,

Your KendoUI configuration looks OK. I assume that the problem is connected with the total property of the DataSource. By design if the total amount of records are reached the "load more" button will disappear.

In this forum thread you can find a list of possible solutions that will fix the problem (the approach is identical for "load more" and "endless scroll"). I hope this will help.

Regards,
Alexander Valchev
the Telerik team

[JD]

well that worked like a charm, thanks for the link to other forum post, was able to make my changes and now it works like a charm. :)