How to center Numeric RadDataPagerButtonField

8 posts, 1 answers
  1. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 14 Nov 2011 Link to this post

    I'm going crazy with this one and hoping there's a good solution. I'd like the RadDataPagerButtonField to be centered within the RadDataPager control. Currently, it's left-justified (or floated). I've been playing with the rdpNumPart class but haven't been successful.

    <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1" PageSize="1" Skin="" CssClass="" >
        <Fields>
            <telerik:RadDataPagerTemplatePageField HorizontalPosition="LeftFloat">
                <PagerTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn" Text="Previous Review" CommandName="Page" CommandArgument="Prev" />
                </PagerTemplate>
            </telerik:RadDataPagerTemplatePageField>
     
            <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="7" />
                                 
            <telerik:RadDataPagerTemplatePageField HorizontalPosition="RightFloat">
                <PagerTemplate>
                    <asp:LinkButton ID="LinkButton2" runat="server" CssClass="btn btn-next" Text="Next Review" CommandName="Page" CommandArgument="Next" />
                </PagerTemplate>
            </telerik:RadDataPagerTemplatePageField>
        </Fields>
    </telerik:RadDataPager>

    Seems like this should be simple as it's a common layout. Thanks in advance for any help!

  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 16 Nov 2011 Link to this post

    Hello Kdl,

    When the pager is configured with the fields you have, it renders as 3 <div> elements where the first 2 have float:left and the third has float:right. In order to move the second div to the center, you will need to set width for the first one. This can be done with the following css:
    <style type="text/css">
    .RadDataPager .rdpWrap
    {
        width:200px;
    }
    </style>

    You should adjust the width additionally. If this does not bring the desired results, you will have to define custom numeric buttons in another TemplateField where you will be able to control the layout freely.

    Greetings,
    Iana Tsolova
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 16 Nov 2011 Link to this post

    Hello Kdl,

    When the pager is configured with the fields you have, it renders as 3 <div> elements where the first 2 have float:left and the third has float:right. In order to move the second div to the center, you will need to set width for the first one. This can be done with the following css:
    <style type="text/css">
    .RadDataPager .rdpWrap
    {
        width:200px;
    }
    </style>

    You should adjust the width additionally. If this does not bring the desired results, you will have to define custom numeric buttons in another TemplateField where you will be able to control the layout freely.

    Greetings,
    Iana Tsolova
    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
  5. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 16 Nov 2011 Link to this post

    Thanks, that does let me get it in the basic area. But I would like to truly center the numeric buttons since I will have as few as 1 and as many as 7 numeric buttons/links (PageButtonCount="7"). Ideally, I'd like it to be centered and look like:

    1 2 3 4 5 6...120

    I didn't find any examples on the site for defining custom numeric buttons in a TemplateField. Can you point me in the right direction for an example? Thanks for your help.
  6. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 21 Nov 2011 Link to this post

    Hi Kdl,

    The numeric pager buttons are LinkButtons with CommandName="Page" and CommandArgument set to the page index, starting from 0 (zero). So creating custom ones would mean creating your own link buttons. I can try making a demo for you, however it will take a bit more time.
    I can send you the sample here when ready.


    Kind regards,
    Iana Tsolova
    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
  7. Answer
    Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 24 Nov 2011 Link to this post

    Hello Kdl,

    After further testing and researching, it appeared that the numeric buttons can be easily centered using javascript. Using this approach, you can leave the built numeric pager field and do not write any custom code.

    Try the attached sample and let me know if it works for you.

    All the best,
    Iana Tsolova
    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
  8. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 28 Nov 2011 Link to this post

    Thank you Iana, that worked perfectly. I like to use the built-in functionality that Telerik provides for the controls whenever possible so I really appreciate your help and simple solution. Thanks again!
  9. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 28 Nov 2011 Link to this post

    Thank you Iana, that worked perfectly. I like to use the built-in functionality that Telerik provides for the controls whenever possible so I really appreciate your help and simple solution. Thanks again!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017