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

align pager control to center of grid

3 Answers 414 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gopinath
Top achievements
Rank 1
Gopinath asked on 27 Mar 2012, 08:27 PM
Hi,

We are using 2011 Telerik Controls. Need to align the pager control (numeric + next/prev) to the center of grid and hide rest of
the paging information

1. How  can we hide rest of paging information? (like page size combo box, item 1 of 20 etc)
2. How align the pager control to the center of visible Grid. Our grid sitting inside a Div with horizontal scrollable.

                                                                             <<  <  1 2 3 4 5 6 7 8 9... >  >>

The gird pager should have only the above display and centered to the grid.

We are using the below settings: but these settings are now bringing the pager to the center of gird, it is still Top-Left

PagerStyle-Position

 

 

="Top" PagerStyle-HorizontalAlign="Center"

 

Thanks,

Gopi

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 28 Mar 2012, 07:07 AM
Hello Gopinath,

Try setting the following CSS and PageSizeLabelText as shown below.
CSS:
.RadGrid_Default .rgInfoPart
{
  display:none !important;
}
.rgAdvPart
{
  display: none;
}
.RadGrid_Default td.rgPagerCell
{
 margin-left:auto !important;
 margin-right:auto !important;
 display:table !important;
 border-style:none !important;
}
ASPX:
<PagerStyle Mode="NextPrevAndNumeric" PageSizeLabelText="" />

Thanks,
Princy.
0
Gopinath
Top achievements
Rank 1
answered on 28 Mar 2012, 04:11 PM
Thanks Princy.

It works in FF and safari. But in IE 6, IE 7 & IE8 the pager sticks to the top-left of the Grid.

Any Ideas?

Thanks,

Gopi
0
Tsvetina
Telerik team
answered on 03 Apr 2012, 08:07 AM
Hello Gopinath,

You can use the following styles, they will work in all browsers:
<style type="text/css">       
    .rgPagerCell
    {
        text-align: center;  
    }
 
    tr.rgPager .rgWrap
    {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }       
 
    .rgPager .rgArrPart1
    {
        margin-right: 5px;   
    }
     
    * + html .rgPager .rgWrap
    {
        display: inline;
    }
     
    * + html .rgPager .rgNumPart a,
    * + html .rgPager .rgNumPart span
    {
        float: none;
        display: inline-block;
    }
     
    tr.rgPager .rgAdvPart,
    tr.rgPager .rgInfoPart
    {
        display: none;
    }
</style>

Also, just to mention that a better approach for overwriting styles is to use CSS selectors with higher specificity than using !important. We have a blog elaborating on how our embedded styles can be overwritten when needed:
http://blogs.telerik.com/aspnetmvcteam/posts/08-06-17/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin.aspx

Greetings,
Tsvetina
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.
Tags
Grid
Asked by
Gopinath
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Gopinath
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or