Sample for DataPager used with a client-side databound ListView

[SUNIL]

I have a ListView using automatic client-side databinding to a web service. Additionally, there is a DataPager placed just after the ListView in the page's markup as in the code pasted below.

When the page loads, the ListView shows data, which means the automatic client-side databinding is working, but the DataPager is showing nothing i.e. there is no pager visible even though there is more than one page of records in the database.

Is there a sample that uses a similar scenario of DataPager with a ListView? I tried searching online, but couldn't find any.

<telerik:RadListView ID="RadListView1" runat="server" RenderMode="Auto" AllowPaging="true" PageSize="5" ItemPlaceholderID="items">
    <ClientSettings>
        <ClientEvents OnDataBinding="RadListView1_Comments_DataBinding" OnDataBound="RadListView1_Comments_DataBound" OnDataSourceResolved="RadListView1_Comments_DataSourceResolved" />
        <DataBinding ItemPlaceHolderID="items">
            <LayoutTemplate>
                        <label for="" class="comments">Comments</label>
                        <div id="items"></div>
                       <%--<div id="pagerContainer"></div>--%>
            </LayoutTemplate>
            <ItemTemplate>
                       <div>
                            <div class="subject">#=Subject#</div>
                            <div class="comment">#=CommentText#</div>
                            <div class="author">by #=Author# on #=CreateDate# </div>
                      </div> 
            </ItemTemplate>
            <EmptyDataTemplate>
                        <div>
                            No Comments have been posted for this page
                        </div>
            </EmptyDataTemplate>
            <DataService Location="~/CommentsService.asmx" DataPath="GetComments" FilterParameterType="Sql" SortParameterType="Sql" CountPropertyName="Count"></DataService>
        </DataBinding>
    </ClientSettings>
</telerik:RadListView>
<telerik:RadDataPager RenderMode="Auto" ID="RadDataPager1" runat="server" PagedControlID="RadListView1">
    <Fields>
        <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
        <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
        <telerik:RadDataPagerGoToPageField></telerik:RadDataPagerGoToPageField>
    </Fields>
</telerik:RadDataPager>

 

I tried adding the following JavaScript code in the client-side databinding event of ListView so that all needed properties of DataPager get set, but still the DataPager shows nothing.

function RadListView1_Comments_DataBound(sender, args) {
    //set datapager properties
    let dataPager = $find(pageBag.radDataPager1Id);
    dataPager.set_currentPageIndex(sender._currentPageIndex);
    dataPager._totalRowCount = sender._virtualItemCount;
    dataPager.set_pageSize(sender._pageSize);
    dataPager._pageCount = Math.ceil(dataPager._totalRowCount / dataPager._pageSize);
    dataPager._startRowIndex = startRowIndex;
}

[SUNIL]

I am not sure if my mentioned scenario is possible with DataPager. However, I came across a client-side pager demo at Client-side pager for ListView, but it shows nothing i.e. the sample is not operational. I am not sure why its not operational.

[Rumen]

Hi Sunil,

Thank you for reporting that the demo is not working! I researched the problem and found that the https://demos.telerik.com/aspnet-ajax/listview/examples/client/programmaticdatabinding/defaultcs.aspx demo does not work due to a server error:

POST https://demos.telerik.com/aspnet-ajax/listview/examples/client/programmaticdatabinding/defaultcs.aspx/GetData 500 (Internal Server Error)

The error appeared to be: System.InvalidOperationException: 'Sequence contains no elements'

The error System.InvalidOperationException: 'Sequence contains no elements', occurs because the LINQ expression .First() is being used on a sequence that does not contain any elements that meet the condition specified in the preceding .Where() clause. This means that there are no ancestor elements with the tag "category" that have a "productId" attribute for at least one of the "example" nodes being processed.

To fix this issue, I set .FirstOrDefault() instead of .First(), and then checked if the result is null before trying to access its attributes. This change prevented the exception by providing a null-check mechanism.

        private static IEnumerable<DemoItem> LoadDemos()
        {
            if (_allDemos == null)
            {
                var context = System.Web.HttpContext.Current;
                var page = (Page)context.Handler;

                XDocument document = XDocument.Load(context.Server.MapPath(XmlPath));
                _allDemos = (from node in document.Descendants("example")
                             let categoryElement = node.Ancestors("category")
                                                       .Where(anc => anc.Attribute("productId") != null)
                                                       .FirstOrDefault()
                              where categoryElement != null
                             let controlName = categoryElement.Attribute("text").Value
                             select new DemoItem
                             {
                                 Title = node.Attribute("name").Value,
                                 Control = controlName,
                                 Category = node.Ancestors("category").Attributes("text").First().Value,
                                 Url = page.ResolveUrl("~/" + node.Attribute("path").Value.ToLower() + "/defaultcs.aspx"),
                                 SpriteCssClass = "icon icon-rad" + controlName.ToLower(),
                                 IsNew = node.Attribute("status") != null
                             }).ToList();
            }
            return _allDemos;
        }

Now the demo is running and fully functional and you can examine it in detail.

I also updated your Telerik points for your report.