TreeList - Pager Template

EmployeeIDLastNameFirstNameTitleAddressCityCountryHomePhoneReportsTo
12
Displaying page 1 of 2 / Items 1 to 5 of 6
2FullerAndrewVice President, Sales908 W. Capital WayTacomaUSA(206) 555-9482 
  1DavolioNancySales Representative507 - 20th Ave. E. Apt. 2ASeattleUSA(206) 555-98572
  3LeverlingJanetSales Representative722 Moss Bay Blvd.KirklandUSA(206) 555-34122
  4PeacockMargaretSales Representative4110 Old Redmond Rd.RedmondUSA(206) 555-81222
 5BuchananStevenSales Manager14 Garrett HillLondonUK(71) 555-48482
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The pager template provides a virtually infinite freedom when one needs to create a customized pager. The above example demonstrates that it is fairly easy to create a template that closely resembles the built-in pager.

In this demo, the custom navigation buttons use the built-in CSS classes and take advantage of the Pager API (see below) to navigate between the pages.


CommandName CommandArgument
Page First
Page Prev
Page Next
Page Last

You could obtain information about the current page, item count, page count, etc. using the following properties:

  • CurrentPageIndex
  • PageCount
  • FirstIndexInPage
  • LastIndexInPage
  • DataSourceCount
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" Inherits="Telerik.TreeListExamplesCSharp.Paging.PagerTemplate.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" EnableAJAX="true" runat="server">
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" AllowPaging="true" DataSourceID="SqlDataSource1"
            DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo" PageSize="5" OnItemCreated="RadTreeList1_ItemCreated">
            <PagerTemplate>
                <table width="100%">
                    <tr>
                        <td align="left">
                            <div class="pagerWrapper">
                                <telerik:RadButton RenderMode="Lightweight" ID="btnPageFirst" runat="server" CssClass="rtlActionButton rtlPageFirst" CommandName="Page" CommandArgument="First" UseSubmitBehavior="false">
                                    <Icon PrimaryIconCssClass="rtlIcon rtlPageFirstIcon" />
                                </telerik:RadButton>
                                <telerik:RadButton RenderMode="Lightweight" ID="btnPagePrev" runat="server" CssClass="rtlActionButton rtlPagePrev" CommandName="Page" CommandArgument="Prev" UseSubmitBehavior="false">
                                    <Icon PrimaryIconCssClass="rtlIcon rtlPagePrevIcon" />
                                </telerik:RadButton>
                                <asp:Panel runat="server" ID="TreeListPagerPlaceHolder"></asp:Panel>
                                <telerik:RadButton RenderMode="Lightweight" ID="btnPageNext" runat="server" CssClass="rtlActionButton rtlPageNext" CommandName="Page" CommandArgument="Next" UseSubmitBehavior="false">
                                    <Icon PrimaryIconCssClass="rtlIcon rtlPageNextIcon" />
                                </telerik:RadButton>
                                <telerik:RadButton RenderMode="Lightweight" ID="btnPageLast" runat="server" CssClass="rtlActionButton rtlPageLast" CommandName="Page" CommandArgument="Last" UseSubmitBehavior="false">
                                    <Icon PrimaryIconCssClass="rtlIcon rtlPageLastIcon" />
                                </telerik:RadButton>
                            </div>
                        </td>
                        <td align="right">
                            <div style="padding-right: 7px">
                                Displaying page
                                <%# (int)DataBinder.Eval(Container, "Paging.CurrentPageIndex") + 1 %>
                                of
                                <%# (int)DataBinder.Eval(Container, "Paging.PageCount") %>
                                / Items
                                <%# (int)DataBinder.Eval(Container, "Paging.FirstIndexInPage") + 1 %>
                                to
                                <%# (int)DataBinder.Eval(Container, "Paging.LastIndexInPage") + 1 %>
                                of
                                <%# DataBinder.Eval(Container, "Paging.DataSourceCount")%>
                            </div>
                        </td>
                    </tr>
                </table>
            </PagerTemplate>
        </telerik:RadTreeList>
    </telerik:RadAjaxPanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [Address], [City], [Country], [HomePhone], [ReportsTo] FROM [Employees]"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?