How to edit a predefined Skin?

[Bilal]

Hi Telerik Team,

I'm using the "Windows7" skin as my default skin for RadGrid.
However, I want to edit the pager style of this skin. For example I want to switch the items counter from right to left, so the pagination will be on right and the items counter on left.
Meanwhile the default position is: Pagination on Left and Items counter on right.

Please do let me know how can I achieve such scenario.

Thanks,
Bilal

[Jayesh Goyani]

Hello,

<PagerStyle PagerTextFormat="Displaying page {0} of {1}, items {2} to {3} of {5}" />

Also check below links for more info.

Setting PagerTextFormat
Setting pager template
Custom Pager Template

Thanks,
Jayesh Goyani

[Shinu]

Hello Bilal,

Try the following CSS.
CSS:

<style type="text/css">
.RadGrid_Default .rgPager div
{
    float:right !important;
}
.RadGrid .rgWrap
{
    white-space: normal !important;
}
 div.RadGrid .rgInfoPart
{
    margin-right:800px !important;
}
</style>

-Shinu.

[Bilal]

Shinu,

It didnt' work.

And Jayesh, the PagerTextFormat attribute did not resolve my problem.

All I need is the items counter to be on the left and the pagination (including right/left arrows, page size) to be on the right.

Please help.

Thanks,
Bilal

[Bilal]

Shinu,

I just noticed that your code work - but when using the Mode="NextPrevAndNumeric", the arrows are switched.
I tried override them by using the PrevPageImageUrl, NextPageImageUrl, etc.. but the problem is when using these attributes, the width of each arrow become wider. (See attached)
Also do you have any solution for placing the Page Size right after the last arrow?

Your help is really appreciated,

Thanks,
Bilal

[Bilal]

Now my boss changed his mind- he only want the Items counter to be on the left, so the order is: Items counter, Pagination, Page size.

Please can you help?

Thank you,
Bilal

[Jayesh Goyani]

Hello,

Method 1 :
Custom Pager Template

Method 2 :

Find div by class name and using jquery and set its position and style.

Thanks,
Jayesh Goyani