Paging Issue when using Web Service Binding

2 posts, 0 answers
  1. BoaMike
    BoaMike avatar
    2 posts
    Member since:
    Sep 2009

    Posted 19 May 2012 Link to this post

    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;
    }

  2. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 24 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top