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

[Solved] Need Grid Pager Help

3 Answers 97 Views

Grid

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

Daniel asked on 08 Oct 2010, 08:11 PM

telerik-pager-help.jpg

I am attempting to create a RadGrid with a pager at the bottom. I'm having a hard time getting the pager to appear the way I want. If you look at the screen shot, you'll see the pager on the left side of the grid with 4 blank buttons, the pages 1 & 2 are right next to each other and the pager wraps onto multiple lines. I want to align the pager with the right side of the grid, get rid of the blank buttons (which I think are first page, prev page, next page and last page), separate the page numbers and display the pager on 1 line only. Please help me! Here is my aspx:

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
    Inherits="WebApplication1.Default" %> 
  
<%@ Register TagPrefix="rad" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
    Namespace="System.Web.UI" TagPrefix="asp" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<html> 
<head> 
    <title>Review Consumers Registered</title> 
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /> 
    <meta content="C#" name="CODE_LANGUAGE" /> 
    <meta content="JavaScript" name="vs_defaultClientScript" /> 
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema" /> 
    <link href="Styles/RadStyles.css" type="text/css" rel="stylesheet" /> 
    <style type="text/css"> 
        div.RadGrid .rgPager .rgAdvPart 
        { 
            display: none; 
        } 
    </style> 
</head> 
<body> 
    <form id="Form1" method="post" runat="server"> 
    <rad:RadScriptManager ID="RadScriptManager1" runat="server" /> 
    <rad:RadGrid ID="grdConsumers" runat="server" EnableEmbeddedSkins="False" AutoGenerateColumns="False"
        Width="100%" OnNeedDataSource="grdConsumers_NeedDataSource" OnItemDataBound="grdConsumers_ItemDataBound"
        CellPadding="0" GridLines="None"> 
        <HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" Height="20px" /> 
        <PagerStyle CssClass="RadGridPager" Mode="NextPrevAndNumeric" NextPageText="Next >" 
            PrevPageText="< Prev" PagerTextFormat="{4} | Page {0} of {1}" HorizontalAlign="Right" /> 
        <MasterTableView TableLayout="Fixed" AllowPaging="true" AllowCustomPaging="true"
            PageSize="10" GridLines="None" DataKeyNames="Id"> 
            <ItemStyle VerticalAlign="Middle" /> 
            <AlternatingItemStyle BackColor="#e6e6e6" VerticalAlign="Middle" /> 
            <Columns> 
                <rad:GridBoundColumn UniqueName="Id" DataField="Id" Visible="False" /> 
                <rad:GridTemplateColumn HeaderStyle-Width="200" UniqueName="ConsumerName" HeaderText="Consumer Name"> 
                    <ItemTemplate> 
                        <asp:HyperLink ID="lnkConsumerName" runat="server" /><br /> 
                        <asp:Label ID="lblAddress" runat="server" /><br /> 
                        <asp:Label ID="lblCityStateZip" runat="server" /> 
                    </ItemTemplate> 
                </rad:GridTemplateColumn> 
                <rad:GridTemplateColumn HeaderStyle-Width="200" UniqueName="Employer" HeaderText="Employer"> 
                    <ItemTemplate> 
                        <asp:Label ID="lblEmployer" runat="server" /> 
                    </ItemTemplate> 
                </rad:GridTemplateColumn> 
                <rad:GridBoundColumn HeaderStyle-Width="150" UniqueName="CreatedDate" DataField="CreatedDate"
                    HeaderText="Date Created" DataFormatString="{0:d} {0:t}"> 
                </rad:GridBoundColumn> 
                <rad:GridTemplateColumn HeaderStyle-Width="250" UniqueName="Enrollment" HeaderText="Enrollment"> 
                    <ItemTemplate> 
                        <asp:Label ID="lblEnrollment" runat="server" /> 
                    </ItemTemplate> 
                </rad:GridTemplateColumn> 
                <rad:GridTemplateColumn UniqueName="Actions" HeaderText="Actions"> 
                    <ItemTemplate> 
                        <asp:Button ID="btnDelete" runat="server" Text="Delete" /> 
                    </ItemTemplate> 
                </rad:GridTemplateColumn> 
            </Columns> 
        </MasterTableView> 
    </rad:RadGrid> 
    </form> 
</body> 
</html>

3 Answers, 1 is accepted

answered on 11 Oct 2010, 07:45 AM

Hello Daniel,

Please, examine the forum thread below, which elaborates on similar subject and let me know if it helps to resolve the problem you are facing.
http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-pager-with-no-skin.aspx

If you need further assistance, please do not hesitate to let us know.

Greetings,
Pavlina
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

answered on 11 Oct 2010, 02:03 PM

telerik-pager-help-2.jpg

I'm sorry but reading that other post didn't help. I'm not very familiar with your skins/css. Are you saying that I am using an old skin or css file? If so, it doesn't matter which skin/css I am using. If I need to add a new skin/css please let me know. All I care about is getting my pager to look right. The version of the RadGrid that I am using is Q3 2009. I believe we had a version of the RadGrid in our application prior to this version so maybe the skin/css is still from the previous version but I can add a new one if necessary. Attached is a screenshot from our app of a different page with the pager in the correct format that I want but I've tried copying the code and it doesn't work for me. I'm guessing this grid is still using the previous version (I'm starting to think we're using 2 different versions of RadGrid in our app).

answered on 14 Oct 2010, 12:46 PM

Hello Daniel,

Basically, the pager should display in one line, as demonstrated in the following example. It could appear on multiple lines if the grid width is not enough for the pager to display in a single line.
Also if you are using custom CSS styles you can review this forum post.

If the layout issue persists, you can open a formal support ticket and send us a small working project, demonstrating your settings and displaying the issue for additional testing.

Looking forward for your reply.

Regards,
Pavlina
the Telerik team