Displaying JSON data from wcf service call

3 posts, 1 answers
  1. JD
    JD avatar
    14 posts
    Member since:
    Jun 2012

    Posted 30 Jan 2013 Link to this post

    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.


    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 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>
        <ul id="load-more"></ul>
        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
                dataSource: dataSource,
                template: $("#load-more-template").text(),
                loadMore: true
    <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>
    <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;
  2. Answer
    Alexander Valchev
    Alexander Valchev avatar
    2887 posts

    Posted 31 Jan 2013 Link to this post

    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.

    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!
  3. JD
    JD avatar
    14 posts
    Member since:
    Jun 2012

    Posted 31 Jan 2013 Link to this post

    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. :)
Back to Top