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!
7 Answers, 1 is accepted
0
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:
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
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
0
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:
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
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
0
KDL
Top achievements
Rank 1
answered on 17 Nov 2011, 04:15 AM
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
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.
="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.
0
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
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
0
Accepted
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
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
0
KDL
Top achievements
Rank 1
answered on 28 Nov 2011, 07:02 PM
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!
0
KDL
Top achievements
Rank 1
answered on 28 Nov 2011, 07:02 PM
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!