Paging numbers not aligned in radgrid

[Raj Mehta]

Hi,

I am using a radgrid to display user roles. I have set the pagesize to 10 and I have more than 10 user roles. When I am setting pagesize = 10 and AllowPaging = True, I can see 2 pages to display more than 10 users. But the paging numbers are not aligned between next and prev arrows. See attachment 1 (Image1_issue.jpg). The code for radgrid is:

<telerik:RadGrid ID="radGridUserGroups" runat="server" AllowSorting=true GridLines="None" EnableViewState=true AllowPaging="true" PageSize=10>

 

 

And the below code is defined in grid default skin to use the same style for all the grids within an application
 <telerik:RadGrid runat="server" EnableEmbeddedSkins=false AutoGenerateColumns="False">
 <PagerStyle Mode="NextPrevAndNumeric" HorizontalAlign=Center></PagerStyle> 
 <FooterStyle Font-Bold=true ForeColor=Black ></FooterStyle>  

 </telerik:RadGrid>

 

 

But if the code for grid is modified as below

<telerik:RadGrid ID="radGridUserGroups" runat="server" AllowSorting=true GridLines="None" EnableViewState=true AllowPaging="true" PageSize=10 EnableEmbeddedBaseStylesheet="false">

 

then the paging numbers are appearing properly (See attachment 2 - image2.jpg) but all the other styles defined in css file is not working. All the headers are not left aligned any more.

I am using Telerik Q1 2010.1.519 version. Please let me know what am I missing?

Thanks,
Raj

[Dimo]

Hi Raj,

The provided code snippets are not sufficient to determine the cause of the problem and moreover, the screenshots are missing.

It is possible that some styles in your custom RadGrid skin are overridden by styles in the embedded base stylesheet. The following article explains why this happens and how to track down and resolve such problems:

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

If you still need assistance after reading the above blog post, please provide the missing screenshots and all relevant CSS code that you are using for RadGrid.

Greetings,
Dimo
the Telerik team

[Raj Mehta]

Hi Dimo,

Thanks for the reply. Sorry about the attachment. I have attached both the images (from my original thread) and also below is the code from radgrid css file which is used for Radgrid. I have read the blog but still I am missing something.

/* Telerik RadGrid WebBlue Skin */
/*global*/

.RadGrid_Default
{
    background: #EDEDDC;
    color: #000;
    scrollbar-face-color: #EDEDC8;
    scrollbar-highlight-color: #bbc1c9;
    scrollbar-shadow-color: #bbc1c9;
    scrollbar-3dlight-color: #d2d6db;
    scrollbar-arrow-color: #333;
    scrollbar-track-color: #d2d6db;
    scrollbar-darkshadow-color: #d2d6db;
}

.RadGrid_Default,
.RadGrid_Default .rgMasterTable,
.RadGrid_Default .rgDetailTable,
.RadGrid_Default .rgGroupPanel table,
.RadGrid_Default .rgEditForm table
{
    font:10px Verdana, Arial,tahoma,sans-serif;
}

.RadGrid_Default,
.RadGrid_Default .rgDetailTable
{
    border-top: 0;
    border-style: solid;
    border-width: 1px;
    border-top-color: inherit;
    border-right-color: #89978F;
    border-bottom-color: #89978F;
    border-left-color: #89978F;
}

.RadGrid_Default .rgMasterTable,
.RadGrid_Default .rgDetailTable
{
    border-collapse:separate !important;
}

.RadGrid_Default .rgFilterRow td,
.RadGrid_Default .rgRow td,
.RadGrid_Default .rgAltRow td,
.RadGrid_Default .rgEditRow td,
.RadGrid_Default .rgFooter td
{
    padding-left:2px;
    padding-right:2px;
}

.RadGrid_Default .rgAdd,
.RadGrid_Default .rgRefresh,
.RadGrid_Default .rgEdit,
.RadGrid_Default .rgDel,
.RadGrid_Default .rgFilter,
.RadGrid_Default .rgPagePrev,
.RadGrid_Default .rgPageNext,
.RadGrid_Default .rgExpand,
.RadGrid_Default .rgCollapse,
.RadGrid_Default .rgSortAsc,
.RadGrid_Default .rgSortDesc,
.RadGrid_Default .rgUpdate,
.RadGrid_Default .rgCancel
{
    width:16px;
    height:16px;
    border:0;
    padding:0;
    background-color:transparent;
    background-image:url('Grid/sprite.gif');
    background-repeat:no-repeat;
    vertical-align:middle;
    cursor:pointer;
}

.RadGrid_Default .rgGroupItem input,
.RadGrid_Default .rgCommandRow img,
.RadGrid_Default .rgHeader input,
.RadGrid_Default .rgFilterRow img,
.RadGrid_Default .rgPager img
{
    vertical-align:middle;
}

/*header*/

.RadGrid_Default .rgHeaderDiv
{
    background: #D2E0DB url( 'Grid/sprite.gif' ) repeat-x 0 -980px;
}

.RadGrid_Default .rgHeader,
.RadGrid_Default th.rgResizeCol
{
    border-top: 1px solid #d8dce0;
    border-bottom: 2px solid #636363;
    padding: 5px 3px 5px 2px;
    background: #99A992;
    text-align: center ;
    font-weight: bold;
}

.RadGrid_Default .rgHeader,
.RadGrid_Default .rgHeader a
{
    color:#000084;
    text-decoration:none;
    font-weight: bold;
}

/*rows*/

.RadGrid_Default .rgFilterRow td,
.RadGrid_Default .rgRow td,
.RadGrid_Default .rgAltRow td,
.RadGrid_Default .rgEditRow td,
.RadGrid_Default .rgFooter td
{
    border-left: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    border-style:  solid;
    border-width: 1px;
    border-top-color: #D2E2DB;
    border-right-color: #DAE9E1;
    border-bottom-color: #fff;
    border-left-color: #DAE9E1;
}

.RadGrid_Default .rgRow a,
.RadGrid_Default .rgAltRow a,
.RadGrid_Default .rgEditRow a,
.RadGrid_Default .rgFooter a
{
    color: #688481;
    text-decoration: underline;
}

.RadGrid_Default .rgRow
{
    background: #EDEDC8;
}

.RadGrid_Default .rgAltRow
{
    background:#fffdf4;
}

.RadGrid_Default .rgSelectedRow
{
    background: #F9FFDD;
}

.RadGrid_Default .rgHoveredRow,
.RadGrid_Default .rgActiveRow
{
    background: #E0EDE6;
}

.RadGrid_Default .rgHoveredRow td,
.RadGrid_Default .rgActiveRow td
{
    border-top-color:#abb4b9;
}

.RadGrid_Default .rgSelectedRow td
{
    border-top-color:#e3d7c0;
    border-bottom-color:#f9f6dd;
}

.RadGrid_Default .rgEditRow
{
    background: #FFFFE1;
    font-weight:bold;
    font-style:italic ;
}
/*footer*/


.RadGrid_Default .rgFooterDiv,
.RadGrid_Default .rgFooter
{
    background: #DADAC8;
    color: #636363;
}

.RadGrid_Default .rgFooter td
{
    border-right-color:#bcc5ca;
    border-bottom-color:#f0f2f4;
}

/*status*/

.RadGrid_Default .rgPager .rgStatus
{
    width:35px;
    border-top:1px solid #bcc5ca;
}

/*paging*/

.RadGrid_Default .rgPager
{
    background: #EDEDDC;
    line-height: 24px;
    color:#333;   
}

.RadGrid_Default .rgPager td
{
    padding:0;   
}

.RadGrid_Default .rgPager .rgPagerCell
{
    border-top:1px solid #bcc5ca;
    padding:2px;
}

.RadGrid_Default .rgPagePrev
{
    background-position:5px -625px;
}

.RadGrid_Default .rgPageNext
{
    background-position:5px -657px;
}

.RadGrid_Default .rgPageFirst,
.RadGrid_Default .rgPageLast
{
    display:none;
}

.RadGrid_Default .rgWrap
{
    float:left;
    padding:0 10px;
}

.RadGrid_Default .rgInfoPart
{
    float:right;
}

.RadGrid_Default .rgArrPart1
{
    padding-right:0;
}

.RadGrid_Default .rgArrPart2
{
    padding-left:0;
}

.RadGrid_Default .rgPager .RadComboBox
{
    vertical-align:middle;
}

.RadGrid_Default .rgNumPart a
{
    margin:0 6px;
    color:#688481;
}

.RadGrid_Default .rgNumPart a.rgCurrentPage
{
    text-decoration:none;
}

.RadGrid_Default .rgPager .RadSlider
{
    float:left;
}

/* pager customizations for the USP application - START */

.RadGrid_Default .rgPager div
{
    width:auto;
}

.RadGrid_Default .rgPager .NextPrevAndNumeric .rgAdvPart
{
    display:none;
}

.RadGrid_Default .rgPager .NextPrevAndNumeric .rgWrap
{
    float:none;
}

.RadGrid_Default .rgPager .NextPrevAndNumeric .rgArrPart1,
.RadGrid_Default .rgPager .NextPrevAndNumeric .rgNumPart,
.RadGrid_Default .rgPager .NextPrevAndNumeric .rgArrPart2
{
    display:inline;
    padding-left:0;
    padding-right:0;
}

/* pager customizations for the USP application - END */


/*sorting, reordering*/

.RadGrid_Default .rgHeader .rgSortAsc
{
    background-position:-21px -528px;
    height:12px;
    font-weight:bold;
}

.RadGrid_Default .rgHeader .rgSortDesc
{
    background-position:4px -528px;
    height:12px;
    font-weight:bold;
}

.GridReorderTop_Default,
.GridReorderBottom_Default
{
    width:10px !important;
    height:10px !important;
    margin-left:-5px;
    background:url('Grid/sprite.gif') 0 -500px no-repeat;
}

.GridReorderBottom_Default
{
    background-position:-21px -500px;
}

/*filtering*/

.RadGrid_Default .rgFilterRow
{
    background: #fffdf4;
}

.RadGrid_Default .rgFilterRow td
{
    border:none;
    border-bottom-color:#abb4b9;
    border-right-color:#abb4b9;
}

.RadGrid_Default .rgFilter
{
    background-position:2px -689px;
}

.RadGrid_Default .rgFilterBox
{
    border:1px solid #afbec5;
    font:10px Verdana, Arial,tahoma,sans-serif;
    background:#fff;
    color:#000;
    vertical-align:middle;
}

/*grouping*/

.RadGrid_Default .rgGroupPanel
{
    background: #BBCCC9 url( 'Grid/sprite.gif' ) repeat-x 0 -300px;
    border-top: 1px solid #898d8f;
    border-bottom: 1px solid #8d9092;
}

.RadGrid_Default .rgGroupItem
{
    border: 1px solid;
    border-color: #fff #8d9092 #8d9092 #fff;
    padding: 1px 4px;
    background: #F0FCF4;
    color: #999;
    white-space: nowrap;
}

.RadGrid_Default .rgGroupPanel .rgSortAsc
{
    background-position:-21px -526px;
}

.RadGrid_Default .rgGroupPanel .rgSortDesc
{
    background-position:4px -526px;
}

.RadGrid_Default .rgGroupPanel td
{
    padding:3px 2px;
}

.RadGrid_Default .rgGroupPanel td td
{
    padding:0;
}

.RadGrid_Default .rgGroupHeader
{
    background: #C7DAD9;
}

.RadGrid_Default .rgGroupHeader td
{
    border-bottom:1px solid #d8dee4;
    padding:3px 3px 3px 2px;
}

.RadGrid_Default .rgExpand
{
    background-position:2px -722px;
}

.RadGrid_Default .rgCollapse
{
    background-position:2px -754px;
}

.RadGrid_Default .rgGroupHeader td div
{
    top:-0.6em;
}

.RadGrid_Default .rgGroupHeader td div div
{
    top:0;
}

/*editing*/

.RadGrid_Default .rgEditForm input[type="text"],
.RadGrid_Default .rgEditForm input[type="password"],
.RadGrid_Default .rgEditForm textarea
{
    border:1px solid #afbec5;
    font:10px Verdana, Arial,tahoma,sans-serif;
    background:#fff;
    color:#000;
}

.RadGrid_Default .rgUpdate
{
    background-position:2px -882px;
}

.RadGrid_Default .rgCancel
{
    background-position:2px -914px;
}

/*hierarchy*/

.RadGrid_Default .rgDetailTable
{
    border-right:0;
}

/*command row*/

.RadGrid_Default .rgCommandRow
{
    background: #F0FCF4;
}

.RadGrid_Default .rgCommandRow td
{
    border-top:1px solid #d8dce0;
    border-bottom:1px solid #90979e;
    padding:1px 2px 2px;
}

.RadGrid_Default .rgCommandRow td td
{
    border:0;
    padding:0;
}

.RadGrid_Default .rgCommandRow a
{
    color:#333;
}

.RadGrid_Default .rgCommandRow a img
{
    vertical-align:middle;
}

.RadGrid_Default .rgAdd
{
    background-position:2px -947px;
}

.RadGrid_Default .rgRefresh
{
    background-position:4px -785px;
}

.RadGrid_Default .rgEdit
{
    background-position:2px -818px;
}

.RadGrid_Default .rgDel
{
    background-position:2px -851px;
}

/*multirow select*/

.GridRowSelector_Default
{
    background:#003 !important;
}

/*row drag n drop*/

.GridItemDropIndicator_Default
{
    border-top:1px dashed #444;
}

/*rtl*/

.RadGridRTL_Default .rgHeader,
.RadGridRTL_Default th.rgResizeCol
{
    text-align:right;
}

Please let me know.

Thanks,
Raj

[Dimo]

Hello Raj,

In order to achieve the desired layout, you should un-float all <div>s with the rgWrap CSS class and make them behave as inline elements. The only exception will be div.rgInfoPart, which should remain with a block display, so that it goes on a new line.

The <a> and <span> elements inside div.rgNumPart should be un-floated as well.

/* pager customizations for the USP application - START */

.RadGrid_Default .rgPager
{
    text-align:center;
}

.RadGrid_Default .rgPager div
{
    width:auto;
}

.RadGrid_Default .rgPager .NextPrevAndNumeric .rgAdvPart
{
    display:none;
}

.RadGrid_Default .rgPager .NextPrevAndNumeric .rgWrap,
.RadGrid_Default .rgPager .NextPrevAndNumeric .rgNumPart a,
.RadGrid_Default .rgPager .NextPrevAndNumeric .rgNumPart a span
{
    float:none;
    display:inline;
}

.RadGrid_Default .rgPager .NextPrevAndNumeric .rgAdvPart
{
    display:none;
}

.RadGrid_Default .rgPager .NextPrevAndNumeric .rgInfoPart
{
    display:block;
}

/* pager customizations for the USP application - END */

Best wishes,
Dimo
the Telerik team

[Raj Mehta]

Hi Dimo,

Thanks for your reply. The changes you requested definitely helped me and solved my issue. However, I got one more issue. The formatting on the pager text is not working as I am expecting. Please see the attached images. In image 4 I have highlighted the section which I am looking to behave after the modified css for the application. For e.g.: pager number are underlined whereas they are not in image 3 and in pager status the numbers (12 and 2  in "12 items in 2 pages) are not bold.

Please let me know.

Thanks,
Raj

[Dimo]

Hello Raj,

The styles that you need are provided below.

However, I would like to strongly recommend you to install the Firebug addon for Firefox, which is a must for every developer, who deals with CSS styles. The addon will tell you why the bold and underline styles are not applied and after reading the following article about CSS specificity, you will know how to proceed:

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx


In addition, when creating a custom skin for a given control, it is good to get familiar with the control's base stylesheet, which can be obtained from the RadControls' installation folder or ZIP - look for Grid.css in the /Skins/ subfolder.


div.RadGrid_Default  .rgInfoPart  strong
{
    font-weight:bold;
}

div.RadGrid_Default  .rgNumPart  a
{
    text-decoration:underline;
}

Regards,
Dimo
the Telerik team

[Raj Mehta]

Hi Dimo,

Thanks for the reply and for all your help. Everything worked like a charm after all the changes.

Thanks again,
Raj.

[Guss]

https://www.telerik.com/forums/grid-pager-style#BKlQxTrrb0SOiXskH8kTMw

 

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