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

Paging Issue when using Web Service Binding

1 Answer 43 Views
ListView
This is a migrated thread and some comments may be shown as answers.
BoaMike
Top achievements
Rank 2
BoaMike asked on 19 May 2012, 06:08 PM
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;
}

1 Answer, 1 is accepted

Sort by
0
Antonio Stoilkov
Telerik team
answered on 24 May 2012, 08:20 AM
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.

Greetings,
Antonio Stoilkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
ListView
Asked by
BoaMike
Top achievements
Rank 2
Answers by
Antonio Stoilkov
Telerik team
Share this question
or