RadDataPager Changing Design

3 posts, 0 answers
  1. elais
    elais avatar
    8 posts
    Member since:
    Jun 2010

    Posted 09 Jul 2010 Link to this post

    Hi There. Is there any chance to make the final layout of raddatapager to look like the image attached? Thank you very much for your help.

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Jul 2010 Link to this post

    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"
     
    <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>
     
    <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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. elais
    elais avatar
    8 posts
    Member since:
    Jun 2010

    Posted 19 Jul 2010 Link to this post

    Thank you. It helped a lot.
Back to Top