Datapager location - top and bottom

3 posts, 0 answers
  1. Susan
    Susan avatar
    11 posts
    Member since:
    Oct 2007

    Posted 29 Feb 2012 Link to this post

    Is there an option to have the datapager show at the top and bottom of a ListView similar to what can be done with the Gridview? Alternatively, if I add two datapager controls to the LayoutTemplate, will they update each other or does that need to be done in code if the page is changed on one of them?
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 02 Mar 2012 Link to this post


    It is possible to position a RadDataPager above and below your RadListView and to have them synchronized. I downloaded and tested the sample code provided by Daniel (Telerik Admin) in the RadListView - 2 DataPagers forum thread. This code works well for me using Telerik.Web.UI 2012.1.215.40 and IE 9:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head runat="server">
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        <script type="text/javascript">
            //Put your JavaScript code here.
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <telerik:RadListView ID="RadListView1" runat="server" OnNeedDataSource="RadListView1_NeedDataSource"
            ItemPlaceholderID="PlaceHolder1" AllowPaging="true">
                <div style="width: 850px">
                    <telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="12">
                            <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                            <telerik:RadDataPagerButtonField PageButtonCount="12" FieldType="Numeric" />
                            <telerik:RadDataPagerGoToPageField />
                            <telerik:RadDataPagerPageSizeField />
                            <telerik:RadDataPagerButtonField FieldType="NextLast" />
                    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                    <div style="clear: both">
                    <telerik:RadDataPager ID="RadDataPager2" runat="server" PageSize="12">
                            <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                            <telerik:RadDataPagerButtonField PageButtonCount="12" FieldType="Numeric" />
                            <telerik:RadDataPagerGoToPageField />
                            <telerik:RadDataPagerPageSizeField />
                            <telerik:RadDataPagerButtonField FieldType="NextLast" />
                <div style="margin: 10px; background-color: #cabe00; float: left; width: 250px; height: 40px;">
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("Col1") %>' />
                    <br />
                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Col2") %>' />

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
    public partial class Default : System.Web.UI.Page
        protected void RadListView1_NeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)
            DataTable dt = new DataTable();
            dt.Columns.Add("Col1", typeof(DateTime));
            dt.Columns.Add("Col2", typeof(DateTime));
            for (int i = 1; i < 60; i++)
                dt.Rows.Add(DateTime.Now.AddDays(i), DateTime.Now.AddDays(i));
            (sender as RadListView).DataSource = dt;

    Reference this online video to see it in action:

    Hope this helps!
  3. DevCraft R3 2016 release webinar banner
  4. Pavlina
    Pavlina avatar
    6069 posts

    Posted 05 Mar 2012 Link to this post


    Go through the forum thread below which demonstrates the desired functionality:

    Kind regards,
    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.
Back to Top