Paging Issue when using Web Service Binding

[BoaMike]

Following the advice in Veli Pehlivanov's Blog post I'm able to bind to a WCF service I created, however I can not get paging to work.  I'm able to successfully bind to the service, the ListView is pouplated with data,  I just get ALL the data when the page loads.  It doesn't appear to be honoring the AllowPaging or PageSize properties.  Since I'm using an svc-less service I followed the Veli's example for binding to any general JSON feed and the returned JSON is in the format of: 
{
    -"Result": {
        +"Data_Items": [...], 
        "Item_Count": 33
    }
}

 I'm assuming that since I'm getting data the DataPropertyName and DataCountName aren't the issue... but I'm not sure where I'm going wrong. 

Below is the markup for the ListView, the Javascript and CSS I'm using.  Does anyone know what I'm doing wrong?

Markup:

<telerik:RadListView ID="lvPostings" runat="server" AllowPaging="true" PageSize="9">

    <LayoutTemplate>

        <div id="listView">

            <a class="pagePrev" href="javascript:void(0);" title="Go to previous page"></a>

            <a class="pageNext" href="javascript:void(0);" title="Go to next page"></a>

            <div id="items">

            </div>

        </div>

    </LayoutTemplate>

    <ClientSettings>

        <DataBinding ItemPlaceHolderID="items">

            <ItemTemplate>

            <div class="item">

                <span class="name">#= UContactName #</span>

                <span class="company">#= Division #</span>

                <span class="title">#= PositionTitle #</span>

                <br />

            </div>

            </ItemTemplate>

            <EmptyDataTemplate>

                <div class="empty">

                    No Matching Data

                </div>

            </EmptyDataTemplate>

            <DataService Location="http://linkapi/SLogic/Postings/?format=json"
                     HttpMethod="Get" ResponseType="JSONP"

                DataPropertyName="Result.Data_Items" CountPropertyName="Result.Item_Count" />               

        </DataBinding>

        <ClientEvents OnDataBound="onListViewDataBound"  />

    </ClientSettings>

</telerik:RadListView>

Javascript:

<script type="text/javascript">
    var listView;

    function pageLoad()
    {
        listView = $find("lvPostings");
    }

    (function($)
    {
        $(function()
        {
            $(".pagePrev").click(function(e)
            {
                listView.page(listView.get_currentPageIndex() - 1);
            });

            $(".pageNext").click(function(e)
            {
                listView.page(listView.get_currentPageIndex() + 1);
            });

        });
    })($telerik.$);

    function onListViewDataBound(sender, args)
    {
        $telerik.$(".pagePrev").css("display", sender.get_currentPageIndex() === 0 ? "none" : "");
        $telerik.$(".pageNext").css("display", sender.get_currentPageIndex() === sender.get_pageCount() - 1 ? "none" : "");
    }
</script>

CSS:

#listView
{
    width: 780px;
    height: 270px;
    margin: 20px auto;
    position: relative;
}

.pagePrev, .pageNext
{
    width: 22px;
    height: 22px;
    position: absolute;
    top: 132px;
    background: transparent url('Common/sprite.gif') no-repeat scroll 0 0;
}

.pagePrev
{
    left: -40px;
}

.pagePrev
{
    background-position: 0 -700px;
}

.pagePrev:hover
{
    background-position: 0 -750px;
}

.pageNext
{
    right: -15px;
}

.pageNext
{
    background-position: 0 -850px;
}

.pageNext:hover
{
    background-position: 0 -900px;
}

.item
{
    float: left;
    background-color: #333333;
    color: #ffffff;
    cursor: pointer;
    font-size:12px;
    height: 76px;
    padding-top: 10px;
    width: 240px;
    margin: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 1px 1px 3px #212121;
    -webkit-box-shadow: 1px 1px 3px #212121;
    box-shadow: 1px 1px 3px #212121;
    position: relative;
}

.item:hover
{
    color: black;
    background-color: #9EC101;
    background-image: -moz-linear-gradient(#577D00, #89AC05);
    background-image: -webkit-linear-gradient(#577D00, #89AC05);
    background-image: -o-linear-gradient(#577D00, #89AC05);
    background-image: linear-gradient(#577D00, #89AC05);
}
.item img, .item .photo
{
    width: 57px;
    height: 70px;
    float: left;
    border: 1px solid #0E0E0E;
    margin: -3px 10px 0 7px;
    background-color: #111111;
}

.item .name, .item .company
{
    display: block;
    margin-bottom: 4px;
    line-height: 14px;
}

.item .company
{
    line-height: 12px;
    text-transform: uppercase;
}

.item .title
{
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 12px;
}

.empty
{
    padding: 10px;
    text-align: center;
    color: White;
    background-color: #333333;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 1px 1px 3px #212121;
    -webkit-box-shadow: 1px 1px 3px #212121;
    box-shadow: 1px 1px 3px #212121;
}

[Antonio Stoilkov]

Hi Michael,

In cases when you are retrieving all items at once you could implement custom paging by setting the VirtualItemCount. You could observe the approach on the demo below. View the ListViewBinding.js file where the listView.set_virtualItemCount(count); is called.

• ListView / Programmatic Binding

Greetings,
Antonio Stoilkov
the Telerik team