This is a migrated thread and some comments may be shown as answers.

Datapager location - top and bottom

2 Answers 161 Views

ListView

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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!