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

Displaying JSON data from wcf service call

2 Answers 143 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
JD
Top achievements
Rank 1
JD asked on 30 Jan 2013, 06:28 AM
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>

2 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 31 Jan 2013, 02:50 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
JD
Top achievements
Rank 1
answered on 31 Jan 2013, 03:11 PM
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. :)
Tags
ListView (Mobile)
Asked by
JD
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
JD
Top achievements
Rank 1
Share this question
or