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

[Solved] Sort,Hierarchy Grid and Pager images issue

1 Answer 151 Views

Grid

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

naveen veda asked on 01 Jun 2009, 01:51 PM

Hi,
I used below style sheet for RadGrid ASP.Net for Ajax working fine,but Pager images(Firstpage,Previouspage,nextpage,lastpage) are displaying like buttons and sort columns image also displaying like button and heirarchy image also displaying like button , what was the problem?can u plz give the solution,

Thanks,

<Telerik:RadGrid ID="DynamicRadgrid" EnableEmbeddedSkins ="false" CssClass ="WebGrid20" Visible="false" runat="server" ShowFooter="False"

AutoGenerateColumns="False" AllowPaging="true" PageSize="10" HeaderStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="left" HeaderStyle-Height="15px" GridLines="None"

OnNeedDataSource="DynamicRadgrid_NeedDataSource" Width="795px">

</ClientSettings>

</Telerik:RadGrid>

/*global*/

div.RadGrid_WebBlue

{

font: normal 9px Arial;

text-align: left;

scrollbar-face-color: #E9E9E9;

scrollbar-highlight-color: white;

scrollbar-shadow-color: #E9E9E9;

scrollbar-3dlight-color: #DBDBDB;

scrollbar-arrow-color: #787878;

scrollbar-track-color: #F5F5F5;

scrollbar-darkshadow-color: #AEAEAE;

}

.WebGrid20 .rgCaption

{

background-color :#92b4e1;

color :#ffffff;

}

.WebGrid20 .RadGrid_WebBlue,

.WebGrid20 .RadGridRTL_WebBlue,

.WebGrid20 .RadGrid_WebBlue a

{

font: normal 11px arial;

font-weight: bold;

color: #333;

}

.WebGrid20 .rgMasterTable

{

border: solid 1px #E8E8E8;

border-collapse: separate !important;

color: #333;

}

.WebGrid20 .rgMasterTable td,

.WebGrid20 .rgMasterTable th

{

padding:2px 4px;

}

.WebGrid20 th.rgHeader,

.WebGrid20 th.rgResizeCol

{

font: bold 11px Arial;

font-weight: bold;

background: #E8E8E8;

height: 21px;

color: white;

background-color :#92b4e1;

}

.WebGrid20 .rgHeaderDiv a

{

color: white;

font-weight: bold;

font: bold 11px Arial;

text-decoration: none;

}

.WebGrid20 .rgRow td,

.WebGrid20 .rgEditRow td,

.WebGrid20 .rgAltRow td,

.WebGrid20 .rgSelectedRow td

{

border-right: solid 1px #999999;

}

.WebGrid20 .rgActiveRow

{

height: 15px;

}

.WebGrid20 .rgEditRow td

{

border-bottom: solid 1px #d8dde0;

}

.WebGrid20 .rgFooter td

{

border: solid 0px Red;

border-top: 0px solid Red;

padding:0 4px;

}

.WebGrid20 tr.rgAltRow

{

background: #c6e3f1;

font: bold 11px Arial;

}

.WebGrid20 .rgSelectedRow,

{

background: #F9ECDB !important;

}

.WebGrid20 .rgEditRow input

{

font-size: 11px;

}

.WebGrid20 .rgActiveRow

{

background: #e7f1ff !important;

}

.WebGrid20 .rgSelectedRow td,

.WebGrid20 .rgActiveRow td

{

border-right: solid 1px #999999;

}

.WebGrid20 .rgPager

{

background: #d6d6d6;

height: 15px;

}

.WebGrid20

.rgPager td

{

color

: Navy;

}

.WebGrid20

.rgFooter

{

background: #e8e8e8;

height: 21px;

color: #666;

}

.WebGrid20

.rgFooter td

{

border: solid 0px #E8E8E8;

border-top: 0px solid Red;

padding:0 4px;

}

.WebGrid20

.rgFooter a,

.WebGrid20

.rgPager td,

.WebGrid20

.rgPager a

{

font-weight: bold !important;

}

.WebGrid20

.rgPager td a:hover,

.WebGrid20

.rgFooter td a:hover

{

color: Navy;

}

.WebGrid20 tr.rgGroupHeader td

{

border-bottom: solid 2px #6788be;

}

.WebGrid20

table.rgGroupPanel

{

background: #92b4e1;

width: 100% !important;

height: 15px;

border-collapse: collapse;

border: dashed 0px #ff9900;

margin-bottom: 12px;

text-align: center;

color: #333;

}

.WebGrid20

.rgGroupItem

{

background: #544b58 url('Img/GroupPanelItemsButtonBg.gif') repeat-x;

color: #ffebcc;

border: solid 1px #8e827f;

white-space: nowrap;

font-size: 9px;

padding: 0px 30px;

height: 18px;

}

.WebGrid20 td.rgHeader input

{

margin-top: 10px;

width: auto;

float: left;

border: solid 1px #E8E8E8;

background: white;

font: bold 9px Arial;

color: #E8E8E8;

height: 14px;

vertical-align: middle;

}

.WebGrid20 td.rgHeader img

{

margin-top: 10px;

margin-left: 2px;

float: left;

}

.WebGrid20

.rgPager

{

background:#dae2e8;

}

.WebGrid20

.rgPager td

{

padding:0;

}

.WebGrid20

.rgPager .rgPagerCell

{

border:1px solid;

border-color:#a2b3c7 #fff #fff;

border-right:0;

padding:3px 0 2px;

}

.WebGrid20

.rgWrap

{

float:left;

padding:0 10px;

line-height:26px;

white-space:nowrap;

}

.WebGrid20

.rgArrPart1

{

padding-right:0;

line-height:22px;

}

.WebGrid20

.rgArrPart2

{

padding-left:0;

line-height:22px;

}

.WebGrid20

.rgInfoPart

{

float:right;

color:#506175;

}

.WebGrid20

.rgInfoPart strong

{

font-weight:normal;

color:#000;

}

.WebGrid20

.rgSEO .rgArrPart1,

.WebGrid20

.rgSEO .rgArrPart2

{

line-height:24px;

}

.WebGrid20

.rgWrap a img

{

margin:0 8px;

}

.WebGrid20

.rgPageFirst,

.WebGrid20

.rgPagePrev,

.WebGrid20

.rgPageNext,

.WebGrid20

.rgPageLast

{

width:22px;

height:24px;

}

.WebGrid20

.rgPageFirst

{

background-position:0 -549px;

}

.WebGrid20

.rgPageFirst:hover

{

background-position:0 -599px;

}

.WebGrid20

.rgPagePrev

{

background-position:0 -699px;

}

.WebGrid20

.rgPagePrev:hover

{

background-position:0 -749px;

}

.WebGrid20

.rgPageNext

{

background-position:0 -849px;

}

.WebGrid20

.rgPageNext:hover

{

background-position:0 -899px;

}

.WebGrid20

.rgPageLast

{

background-position:0 -999px;

}

.WebGrid20

.rgPageLast:hover

{

background-position:0 -1049px;

}

.WebGrid20

.rgPagerButton

{

height:22px;

border:1px solid;

border-color:#4e667e #476077 #425c71;

margin:0 14px 0 0;

padding:0 4px 2px;

background:#d6e1e7 repeat-x 0 -1550px url('FocalPoint/sprite.gif');

color:#0d202b;

font:12px/12px "segoe ui",arial,sans-serif;

vertical-align:middle;

cursor:pointer;

}

.WebGrid20

.rgNumPart

{

padding:2px 0;

}

.WebGrid20

.NumericPages .rgNumPart

{

padding:2px 10px;

}

.WebGrid20

.rgNumPart a:hover,

.WebGrid20

.rgNumPart a:hover span,

.WebGrid20

.rgNumPart a.rgCurrentPage,

.WebGrid20

.rgNumPart a.rgCurrentPage span

{

background:no-repeat url('FocalPoint/sprite.gif');

}

.WebGrid20

.rgNumPart a

{

float:left;

line-height:22px;

margin:0;

padding:0 5px 0 0;

color:#000;

text-decoration:none;

}

.WebGrid20

.rgNumPart span

{

float:left;

padding:0 0 0 5px;

}

.WebGrid20

.rgNumPart a:hover

{

background-position:100% -1250px;

color:#0e3d4f;

}

.WebGrid20

.rgNumPart a:hover span

{

background-position:0 -1150px;

cursor:pointer;

}

.WebGrid20

.rgNumPart a.rgCurrentPage,

.WebGrid20

.rgNumPart a.rgCurrentPage:hover

{

background-position:100% -1450px;

color:#0053a5;

cursor:default;

}

.WebGrid20

.rgNumPart a.rgCurrentPage span,

.WebGrid20

.rgNumPart a.rgCurrentPage:hover span

{

background-position:0 -1350px;

cursor:default;

}

.WebGrid20

.NextPrevNumericAndAdvanced .rgAdvPart

{

float:none;

text-align:center;

}

.WebGrid20

.rgPager .RadSlider

{

float:left;

margin:2px 10px 0 0;

}

.WebGrid20

.rgPager .rgPagerLabel,

.WebGrid20

.rgPager .RadComboBox,

.WebGrid20

.rgPager .RadInput_WebBlue

{

margin:0 4px 0 0;

vertical-align:middle;

}

.WebGrid20

.rgPager .RadComboBox

{

margin-top:-1px;

}

*+html

.WebGrid20 .rgPager .RadComboBox{margin-top:-2px;}

html .WebGrid20 .rgPager .RadComboBox{margin-top:-2px;}

html .WebGrid20 .rgPager .RadComboBox{padding:1px 0;}

.WebGrid20

.rgPagerTextBox

{

text-align:center;

}

/*hierarchy*/

.WebGrid20

.rgDetailTable

{

border:1px solid #768ca5;

border-right:0;

font:12px/16px "segoe ui",arial,sans-serif;

border-collapse:separate;

}

.RadGridRTL_WebBlue

.rgDetailTable

{

border-right:1px solid;

border-left:0;

}

.WebGrid20

.rgDetailTable

{

border-collapse:separate;

}

1 Answer, 1 is accepted

answered on 01 Jun 2009, 02:08 PM

Hi Naveen,

By default the RadGrid buttons are the so called sprite buttons, which are push buttons with background styles. It looks like you are missing the background styles.

You should either set PrevPageImageUrl, NextPageImageUrl, etc. in PagerStyle (so that the sprite buttons are changed to image buttons with the specified urls), or add the missing CSS styles to the skin:

.RadGrid_SkinName .rgPagePrev,
.RadGrid_SkinName .rgPageNext,
.RadGrid_SkinName .rgPageFirst,
.RadGrid_SkinName .rgPageLast
{
    width:16px;
    height:16px;
    border:0;
    margin:0;
    padding:0;
    background-color:transparent;
    background-image:url('................');
    background-repeat:no-repeat;
    vertical-align:middle;
    font-size:1px;
    cursor:pointer;
}

(you should replace the orange strings with the true values)

Note that you currently have background-position styles in the skin, which is intended to be used with some CSS sprite. If you are not using such a CSS sprite and use separate images for every pager button, you should reset the background position styles to 0 0.

.............
{
    background-position:0 0;
}

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.