Right alignment Paging

[vijayaraj]

Team,

  Can anybody let me know if how can I set my paging to the right alignment in the RadGrid. Currently with this code below the grid is not diaplsying the pager with right alignment.

in Code-Behind i wrote

 

this.RadGrid1.MasterTableView.PagerStyle.AlwaysVisible = true;

 

 

this.RadGrid1.MasterTableView.PagerStyle.ShowPagerText = false;

 

 

this.RadGrid1.MasterTableView.PagerStyle.HorizontalAlign = HorizontalAlign.Center;

 

 

this.RadGrid1.MasterTableView.PagerStyle.PrevPageText = "Previous";

 

 

this.RadGrid1.MasterTableView.PagerStyle.NextPageText = "Next";

 

 

this.RadGrid1.MasterTableView.PagerStyle.Mode = Telerik.Web.UI.GridPagerMode.NextPrevAndNumeric;

 

Thanks
Vijay

[Dimo]

Hello Vijay,

I am not sure how exactly you expect the pager to look like, but generally, the layout is controlled by setting styles on the following CSS classes:

PagerLeft_SkinName
PagerRight_SkinName


For example:

div.PagerLeft_SkinName

{

float: right;

}

div.PagerRight_SkinName

{

clear: right;

}

If you don't want to split the pager to two lines, please remove the second CSS rule

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Guss]

Well, NOT WITH CSS if you have the info and and numeric and next previous.... because if your float right on the next pervious and numbers there sequence is wrong.... the prev buttons will be at the end, and the next button in from of the numbers. So floating all the number divs right and the info string left, does not work out.

For goodness sake, why couldn't telerik just wrap a div around similar items... like <<< 1,2,3,4 > >>  belong together, so wrap them in a control please.   Here is how you do it in jquery:
The first line, take all the divs with the class of .rgWrap that is inside the parent div with class NextPreviousNumeric, EXCEPT for the last child, and wrap them all in a div.  If using bootstrap, give the div the class name "pull right".
Second line: the item we have skipped (last one) is a div with class .rgInfoPart. This div I want to float left, so add you class that float elements left... In my case, bootstrap and .pull-left.

1.$('.NextPrevAndNumeric').children('.rgWrap ').not(':last-child').wrapAll('<div class="pull-right" />');
2.$('.NextPrevAndNumeric > .rgInfoPart').addClass("pull-left");

2 lines, that will not break anything... no need for LARGE pager templates.

[Doncho]

Hi Guss,

Thank you for sharing this approach with the community! 

It might help other developers trying to achieve similar customization of the built-in appearance.

In case you think that we should modify the Html structure rendered by the RadGrid and that would be a useful improvement, I would suggest you log it as a feature request in our feedback portal -  Progress® Telerik® UI for ASP.NET AJAX Feedback Portal. If the feature gains high interest and collects a lot of votes, it can be considered for future implementation.

As a side note: I have noticed that you raised the same question in several different forum threads. I will post an answer here only as your suggestion fits best the subject of this specific forum thread.

Once again, thank you for communicating this idea with the forum members!

Kind regards,
Doncho
Progress Telerik