Grid pager style

[jeevitha]

Hi,
I am using the latest version of dll. I need to overwite my css in such a way my pager numbers should be appeared in rifht side. how to do it. Tried the following but nothing happend

.RadGridRTL_Web20 .rgNumPart a
{
    float: right !important;
    text-align: right !important;
}
.RadGrid_Web20 .rgPager .rgStatus
{
 text-align : right !important;
}

Thanks,
Jeevihta

[Princy]

Hi Jeevitha,

Try out the following css setting to move the page numbers to the right side of the grid:
css:

.RadGrid_Web20 .rgPager div
    {
        float:right;
    }

Thanks
Princy.

[Dimo]

Hello Jeevihta,

Since you are trying to use the RadGrid RTL classes, then I suppose you are constructing an RTL layout. If this is the case, no additional CSS is required, but you have to set RTL direction for the page. Here is an example:

http://demos.telerik.com/aspnet-ajax/grid/examples/styles/righttoleft/defaultcs.aspx

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[jeevitha]

Hi Dimo the code which given by Princy works great. One more question.. How can i set the border for empty cells of the grid . used the follg code. but nothing happened

.RadGrid_Web20 .rgRow td, .RadGrid_Web20 .rgAltRow td, .RadGrid_Web20 .rgEditRow td, .RadGrid_Web20 .rgFooter td
{
    border: 1px solid #DAE4EB;
    border-top: 0;
    padding-top: 0px;
    padding-bottom: 0px;
}
Thnks,
Jeevitha

[Dimo]

Hello Jeevitha,

Empty cells do not have borders in IE. Fill them up with  

http://www.telerik.com/community/forums/aspnet-ajax/grid/border-not-displayed-if-cell-is-empty-in-internet-explorer.aspx

If you want to override the RadGrid skin, you have to use higher specificity, e.g. by adding a "div":

div.RadGrid_Web20 .rgRow td,
div.RadGrid_Web20 .rgAltRow td,
div.RadGrid_Web20 .rgEditRow td,
div.RadGrid_Web20 .rgFooter td
{
    border: 1px solid #DAE4EB;
    border-top: 0;
    padding-top: 0px;
    padding-bottom: 0px;
}

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[jeevitha]

Thanks Dimo.. i tried yr code. but stil the border not appearing for the empty cells.

My code is
div.RadGrid_Web20 .rgRow td,
div.RadGrid_Web20 .rgAltRow td,
div.RadGrid_Web20 .rgEditRow td,
div.RadGrid_Web20 .rgFooter td
{
    border-top: 1px solid #DAE4EB !important;
    border-bottom: 1px solid #DAE4EB !important;
    border-left: 1px solid #DAE4EB !important;
    border-right: 1px solid #DAE4EB !important;
}

[Dimo]

Hi Jeevitha,

May be I was not clear enough. Borders are never displayed for empty table cells, unless you insert a   string in them. Refer to the link in my previous post.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Guss]

The Original question was how to get the pager elements to the right.

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.

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

 

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