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

RadDataPager Changing Design

2 Answers 75 Views

ListView

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

2 Answers, 1 is accepted

answered on 13 Jul 2010, 08:45 AM

Hi Elais,

Yes, you should create a custom skin for the RadDataPager. Here is a simple demo.

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void RadDataPager1_FieldCreated(object sender, RadDataPagerFieldCreatedEventArgs e)

{

if (e.Item.Field is RadDataPagerButtonField)

{

Button btn2 = e.Item.FindControl("PrevButton") as Button;

if (btn2 != null)

btn2.Text = "Prev";

Button btn3 = e.Item.FindControl("NextButton") as Button;

if (btn3 != null)

btn3.Text = "Next";

}

</script>

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

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls for ASP.NET AJAX</title>

<style type="text/css">

div.RadDataPager_MySkin .rdpNumPart a

{

border:1px solid #69c;

margin:0 6px 0 0;

padding:0 8px 0 0;

font-size:11px;

line-height:20px;

color:#036;

}

div.RadDataPager_MySkin .rdpNumPart span

{

padding:0 0 0 8px;

}

div.RadDataPager_MySkin .rdpNumPart a.rdpCurrentPage

{

background:#69c;

color:#fff;

}

div.RadDataPager_MySkin .rdpPagePrev,

div.RadDataPager_MySkin .rdpPageNext

{

width:34px;

height:22px;

border:1px solid #69c;

font-size:11px;

color:#036;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadListView runat="server" ID="RadListView1" AllowPaging="True" PageSize="3"

DataKeyNames="CategoryID" DataSourceID="SqlDataSource1"

Skin="Windows7">

<AlternatingItemTemplate>

<tr class="rlvA">

<td>

<asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />

</td>

<td>

<asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />

</td>

</tr>

</AlternatingItemTemplate>

<ItemTemplate>

<tr class="rlvI">

<td>

<asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />

</td>

<td>

<asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />

</td>

</tr>

</ItemTemplate>

<LayoutTemplate>

<div class="RadListView RadListView_Windows7" style="width:600px">

<table cellspacing="0" style="width: 100%;">

<thead>

<tr class="rlvHeader">

<th>

CategoryID

</th>

<th>

CategoryName

</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="3">

<telerik:RadDataPager ID="RadDataPager1" runat="server" Skin="MySkin" EnableEmbeddedSkins="false"

PagedControlID="RadListView1" PageSize="3" OnFieldCreated="RadDataPager1_FieldCreated">

<Fields>

<telerik:RadDataPagerButtonField FieldType="Prev" PrevButtonText="Prev" />

<telerik:RadDataPagerButtonField FieldType="Numeric" />

<telerik:RadDataPagerButtonField FieldType="Next" NextButtonText="Next" />

</Fields>

</telerik:RadDataPager>

</td>

</tr>

</tfoot>

<tbody>

<tr id="itemPlaceholder" runat="server">

</tr>

</tbody>

</table>

</div>

</LayoutTemplate>

</telerik:RadListView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">

</asp:SqlDataSource>

</form>

</body>

</html>

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items