Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Datapager location - top and bottom

2 Answers 125 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Susan
Top achievements
Rank 1
Susan asked on 29 Feb 2012, 05:30 PM
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 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 02 Mar 2012, 04:36 PM
Steve:

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:

Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--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" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadListView ID="RadListView1" runat="server" OnNeedDataSource="RadListView1_NeedDataSource"
        ItemPlaceholderID="PlaceHolder1" AllowPaging="true">
        <LayoutTemplate>
            <div style="width: 850px">
                <telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="12">
                    <Fields>
                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                        <telerik:RadDataPagerButtonField PageButtonCount="12" FieldType="Numeric" />
                        <telerik:RadDataPagerGoToPageField />
                        <telerik:RadDataPagerPageSizeField />
                        <telerik:RadDataPagerButtonField FieldType="NextLast" />
                    </Fields>
                </telerik:RadDataPager>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                <div style="clear: both">
                </div>
                <telerik:RadDataPager ID="RadDataPager2" runat="server" PageSize="12">
                    <Fields>
                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                        <telerik:RadDataPagerButtonField PageButtonCount="12" FieldType="Numeric" />
                        <telerik:RadDataPagerGoToPageField />
                        <telerik:RadDataPagerPageSizeField />
                        <telerik:RadDataPagerButtonField FieldType="NextLast" />
                    </Fields>
                </telerik:RadDataPager>
            </div>
        </layouttemplate>
            <itemtemplate>
            <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") %>' />
            </div>
        </itemtemplate>
        </telerik:RadListView>
    </div>
    </form>
</body>
</html>

 Default.aspx.cs:
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: http://screencast.com/t/fTvgWG8rh

Hope this helps!
0
Pavlina
Telerik team
answered on 05 Mar 2012, 01:11 PM
Hi,

Go through the forum thread below which demonstrates the desired functionality:
http://www.telerik.com/community/forums/aspnet-ajax/listview/radlistview-with-raddatapager.aspx

Kind regards,
Pavlina
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.
Tags
ListView
Asked by
Susan
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or