New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom paging

Alejandra Camino
Alejandra Camino Romero y tomillo
Alexander Feuer
Alexander Feuer Morgenstern Gesundkost
Ana Trujillo
Ana Trujillo Ana Trujillo Emparedados y helados
Anabela Domingues
Anabela Domingues Tradição Hipermercados
André Fonseca
André Fonseca Gourmet Lanchonetes

ID Name Date UnitPrice Discontinued
0 Côte de Blaye Thursday, May 10, 2007 $23.25
1 Boston Crab Meat Saturday, September 13, 2008 $9.00
2 Singaporean Hokkien Fried Mee Friday, February 22, 2008 $45.60
3 Gula Malacca Friday, January 2, 2009 $32.00
4 Boston Crab Meat Saturday, September 13, 2008 $9.00
5 Spegesild Monday, May 12, 2008 $19.00
6 Côte de Blaye Thursday, May 10, 2007 $23.25
7 Chocolade Tuesday, August 26, 2008 $18.40
8 Singaporean Hokkien Fried Mee Friday, February 22, 2008 $45.60
9 Valkoinen suklaa Monday, July 16, 2007 $14.00
12345678910...
Page
of 10000

RadListView supports custom paging for various scenarios where you either want to handle paging yourself, or delegate it to a data source control.

The first example demonstrates RadListView with manually handled custom paging. A RadSlider control is used to navigate amoung the set of all customers, with enabled AutoPostback that fires the control's ValueChanged event on the server. There, we call the RadLisViewItem.FireCommand() method. The method itself invokes RadListView's PageIndexChanged event where we need to set up the next page of data to be extracted.

To enable custom paging in RadListView, you need to set:

  • AllowPaging = true; - enable paging for RadListView
  • AllowCustomPaging = true; - enable custom paging for RadListView
  • VirtualItemCount = [number]; - set the virtual total item count in the data source

When custom paging is enabled in RadListView, the control only fires its PageIndexChanged event on the server and rebinds after that. The developer is responsible for implementing the paging logic and providing the requested page of data to RadListView inside the event handler.

Finally, we use a RadToolTip to display the leftmost contact name that will be loaded when sliding the handler. The tooltip text is taken from an array that is populated with the contact names fetched on the server using the RegisterArrayDeclaration() method of the ClientScriptManager object.

The second RadListView demonstrates binding to a custom objects collection using an ObjectDataSource control. The data source control has paging enabled and it is sufficient for the developer to enable paging in RadListView. All the paging operations are then delegated to the ObjectDataSource control.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
    • DefaultVB.aspx.vb
    • MyBusinessObjects.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.ListViewExamplesCSharp.Paging.CustomPaging.DefaultVB" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
  <div class="demo-container size-wide" id="demo-container">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadListViewLayoutPanel">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadListViewLayoutPanel" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ListViewPanel2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ListViewPanel2" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Office2007">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" Skin="Office2007"
            DecoratedControls="All" EnableRoundedCorners="false" ControlsToSkip="H4H5H6" />
        <telerik:RadListView ID="RadListView1" runat="server" DataSourceID="SqlDataSource1" RenderMode="Lightweight"
            ItemPlaceholderID="ProductsContainer" DataKeyNames="CustomerID" AllowPaging="true"
            AllowCustomPaging="true" VirtualItemCount="91" PageSize="5" OnPageIndexChanged="RadListView1_PageIndexChanged">
            <LayoutTemplate>
                <asp:Panel ID="RadListViewLayoutPanel" runat="server">
                    <div class="products-container">
                        <asp:PlaceHolder ID="ProductsContainer" runat="server"></asp:PlaceHolder>
                    </div>
                    <div class="slider">
                        <script type="text/javascript">
                            function clientSlide(sender, args) {
                                var value = sender.get_value();
                                $find('<%# Container.FindControl("RadToolTip1").ClientID %>').set_text(names[value - 1]);
                        }
                        function tooltipBeforeShow(sender, args) {
                            sender.set_text(names[$find('<%# Container.FindControl("RadSlider1").ClientID %>').get_value() - 1]);
                        }
                        </script>
                        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider1" runat="server" Skin="Office2007" Width="400px"
                            Style="margin: auto;" AutoPostBack="true" MinimumValue="1" MaximumValue="91"
                            OnValueChanged="RadSlider1_ValueChanged" OnClientSlide="clientSlide">
                        </telerik:RadSlider>
                        <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" Position="TopRight" Skin="Office2007"
                            ShowCallout="false" MouseTrailing="false" RelativeTo="Element" RenderInPageRoot="true"
                            ShowDelay="0" ShowEvent="OnMouseOver" TargetControlID="RadSlider1" OnClientBeforeShow="tooltipBeforeShow">
                        </telerik:RadToolTip>
                    </div>
                </asp:Panel>
            </LayoutTemplate>
            <ItemTemplate>
                <div class="item">
                    <img src='../../../../Img/Northwind/Customers/<%# Eval("CustomerID") %>.jpg' alt='<%# Eval("ContactName") %>' />
                    <div class="mask">
                    </div>
                    <div class="details">
                        <span class="name">
                            <%# Eval("ContactName") %></span> <span class="company">
                                <%# Eval("CompanyName") %></span>
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadListView>
        <asp:SqlDataSource ID="SqlDataSource0" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT * FROM (SELECT ROW_NUMBER() OVER (ORDER BY ContactName ASC) AS [Index], [ContactName] FROM [Customers]) AS InnerTable"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT * FROM (SELECT ROW_NUMBER() OVER (ORDER BY ContactName ASC) AS [Index], [CustomerID], [CompanyName], [ContactName] FROM [Customers]) AS InnerTable WHERE InnerTable.[Index] BETWEEN @StartIndex AND @EndIndex">
            <SelectParameters>
                <asp:Parameter Name="StartIndex" Type="Int32" DefaultValue="1"></asp:Parameter>
                <asp:Parameter Name="EndIndex" Type="Int32" DefaultValue="5"></asp:Parameter>
            </SelectParameters>
        </asp:SqlDataSource>
        <br />
        <asp:Panel ID="ListViewPanel2" runat="server">
            <telerik:RadListView ID="RadListView2" runat="server" DataSourceID="ObjectDataSource1"
                DataKeyNames="ID" ItemPlaceholderID="ItemPlaceHolder1" AllowPaging="true" Skin="Office2007">
                <LayoutTemplate>
                    <div class="RadListView RadListView_Office2007 containerTable">
                        <%--products--%>
                        <table class="layoutTable">
                            <thead>
                                <tr class="rlvHeader">
                                    <th>ID
                                    </th>
                                    <th>Name
                                    </th>
                                    <th>Date
                                    </th>
                                    <th>UnitPrice
                                    </th>
                                    <th>Discontinued
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <asp:PlaceHolder ID="ItemPlaceHolder1" runat="server"></asp:PlaceHolder>
                            </tbody>
                        </table>
                        <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" CssClass="pager" Skin="Office2007">
                            <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>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <tr class="rlvI">
                        <td>
                            <%# Eval("ID") %>
                        </td>
                        <td>
                            <%# Eval("Name") %>
                        </td>
                        <td>
                            <%# Eval("Date", "{0:D}") %>
                        </td>
                        <td>
                            <%# Eval("UnitPrice", "{0:C}")%>
                        </td>
                        <td>
                            <asp:CheckBox ID="DiscontinuedCheckBox" runat="server" Enabled="false" Checked='<%# Eval("Discontinued") %>'></asp:CheckBox>
                        </td>
                    </tr>
                </ItemTemplate>
            </telerik:RadListView>
        </asp:Panel>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" EnablePaging="true" SelectCountMethod="SelectCount"
            SelectMethod="Select" TypeName="Telerik.Web.Examples.Grid.MyBusinessObjectCollection"></asp:ObjectDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance