How to center Numeric RadDataPagerButtonField

[KDL]

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!

[Iana Tsolova]

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

[Iana Tsolova]

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

[KDL]

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.

[Iana Tsolova]

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

[Iana Tsolova]

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

[KDL]

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!

[KDL]

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!