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

CssClass at design time

12 Answers 509 Views

Grid

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

Prathibarani asked on 19 Mar 2013, 05:05 PM

Hi,

We are using other 3rd party grids for our asp.net web application. We are in the process of testing Telerik RadGrid. Currently, what we are doing is we have grid.css (custom CSS class) at global location which has all the details of styling. This way, we do not need to set styles at element level. For this, what we did is we checked how vendor grid is rendered and then defined styles like this:

caption

h2 {

text-align: left;

margin: 15px 0 2px 0;

padding: 15px 0 2px 0;

line-height: 1.1em;

}

caption

p {

text-align: left;

margin: 1px 0 2px 0;

padding: 1px 0 2px 0;

line-height: 1em;

}

table th /* styling for grid header row */

{

padding: .1em .1em .1em .4em;

vertical-align: top;

text-align: center;

border: 1px solid white;

background-color: #e2dbc8; /*#f0ece3;*/

}

table td /* styling for grid data rows */

{

padding: .1em .1em .1em .4em;

vertical-align: top;

font-size: .85em;

text-align: left;

border: 1px solid white;

background-color: #f0ece3;

}

tr.altrow

td, .altrow{ background-color: #e2dbc8; }

.gridframe

{ border: none;}

and set the grid style property to this css file like this :

StyleSetPath

="~/grid.css"

So, with radgrid, I would like to achieve the same thing instead of dealing at grid level or element within grid. We have many pages using grid. So, I prefer not to do it at grid level. Please let me know how to do this.
I appreciate your response.

Prathiba

12 Answers, 1 is accepted

answered on 19 Mar 2013, 05:16 PM

If you go to the folder where you have Telerik ASP.NET installed and then go to the Skins folder (in my case: C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q1 2013\Skins). There is a file there called Grid.CSS (or go into one of the theme folders and get the Grid.THEMENAME.CSS file from there). You can create a new CSS file using the contents of the provided one and name it something more specific like 'RADGrid.css', import the style sheet on the page. Then, just modify this new 'RADGrid.CSS' file to adhere to the styling you'd want and can then be implemented in any other pages that use the Telerik grid.

You may also need to set EnableEmbeddedSkins to False to achieve full customization.

answered on 19 Mar 2013, 06:52 PM

Hi Juan,

Thanks for response. Please clarify me on this:

1) STEP1 - I went to location C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q1 2013\Skins.
2) STEP 2   - I saw a file called Grid.CSS
3) STEP 3 -  Created a new file with name RADGrid.CSS and copied the contents of Grid.CSS. Where should I save this file. In local project or in
                            the path mentioned in STEP 1.

4) STEP 4 - How can I import style sheet on the page ? Is there a property to set in RadGrid at design time
5) STEP 5 - Modify RadGrid.css to the style I want - you mean to say STEP 3 file modification ?
6) STEP 6 - Where should I store so that all pages that use RadGrid can access it.

Thanks,
Prathiba.

answered on 19 Mar 2013, 07:29 PM

Step 3) Store the new CSS file in your project/web folder. Wherever you want. Store it in the same place your current Grid.css file is.
Step 4) Add the following to your ASCX/ASPX file (no need to do anything special to the grid; the CSS file already has the grid class names that get generated by it):

<link href="MyCSSFolderpath/RADGrid.css" rel="Stylesheet" />

Step 5) Yes, modify the new RADGrid.CSS file so that it uses the styling you want (e.g. change the background color and header images, etc...).
Step 6) Usually I have a dedicated folder for my shared CSS files under the root of the web site (for example: C:\Inetpub\wwwroot\MyWebSite\Styles). Then, update the stylesheet declaration from Step 4 so that it uses a relative address that is correct for the page using it. So, if your web page is in 'C:\Inetpub\wwwroot\MyWebSite\MySubPortal\SomeFolder\WebPage.aspx' and your style sheet is in 'C:\Inetpub\wwwroot\MyWebSite\Styles\RADGrid.css', the css declaration line would be:

<link href="../../Styles/RADGrid.css" rel="Stylesheet" />

Hope that helps.

answered on 20 Mar 2013, 04:34 PM

Hi Juan,
Thanks for immediate reply. I did as you suggested.
Copied grid.css to local project. Renamed it to RadGrid.css. I set the EnableEmbedded skins to false. I modified RadGrid.css file to this:
I kept everything as is in the file and added at the end like this:
/* styling for grid header row */

.RadGrid

.rgHeader

{

padding-left: .1em !important;

padding-right:.1em !important;

padding-top: .1em !important;

padding-bottom:.1em !important;

vertical-align: top !important;

text-align: center !important;

border: 1px solid white !important;

background-color: red !important;

}

On apsx page I included link like this:

head runat="server">

head>

When I switch to design time I see background color of header row as red. When I run the project locally, grid header row is not changed to red. Since we set enableembeddedskins to false, lost all styling of grid.

what should I do
Thanks,
Prathiba

Accepted

answered on 20 Mar 2013, 04:49 PM

GridWithCustomCSSSkin.png

What happens if you leave enableembeddedskins set to True? Here is an example of what I did which uses a built-in skin but then overrides parts of it so that it displays how I needed it to:

<telerik:RadGrid ID="grdItems" runat="server" AllowAutomaticDeletes="True" AllowSorting="True"

PageSize="12" AutoGenerateColumns="False" OnNeedDataSource="grdItems_NeedDataSource"

OnItemCommand="grdItems_ItemCommand" OnPreRender="grdItems_PreRender" OnUpdateCommand="grdItems_UpdateCommand"

Width="456px" OnDeleteCommand="grdItems_DeleteCommand" OnEditCommand="grdItems_EditCommand"

OnItemDataBound="grdItems_ItemDataBound" ShowStatusBar="True" AllowAutomaticInserts="True"

AllowAutomaticUpdates="True" OnItemCreated="grdItems_ItemCreated" Skin="Metro"

BorderStyle="None" CellSpacing="0" GridLines="None" ForeColor="White" BackColor="Transparent"

ShowFooter="True" AllowMultiRowEdit="True">

<ValidationSettings ValidationGroup="ItemsGrid" />

<ClientSettings AllowKeyboardNavigation="True">

<Selecting AllowRowSelect="True" />

<KeyboardNavigationSettings AllowSubmitOnEnter="True" AllowActiveRowCycle="True" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />

<ClientEvents OnKeyPress="OnKeyPress" OnRowSelected="RowSelected" OnRowClick="RowClick"

OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />

<Resizing ShowRowIndicatorColumn="False" />

</ClientSettings>

<AlternatingItemStyle BackColor="LightGray" BorderStyle="None" ForeColor="Black" />

<EditItemStyle BackColor="Gainsboro" BorderStyle="None" />

<FooterStyle BorderStyle="None" />

<HeaderStyle BorderStyle="None" Height="48px" HorizontalAlign="Left" VerticalAlign="Middle" />

<ItemStyle BackColor="White" BorderStyle="None" ForeColor="Black" />

<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

<SelectedItemStyle BorderStyle="None" />

<FilterMenu EnableImageSprites="False" />

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />

<MasterTableView NoMasterRecordsText="No items to display." EditMode="InPlace"

CommandItemDisplay="None" BorderStyle="None" BackColor="Transparent" ShowFooter="False">

<HeaderStyle BorderStyle="None" Font-Bold="True" Font-Size="Medium" ForeColor="White"

Height="48px" HorizontalAlign="Left" VerticalAlign="Middle" Wrap="True" />

<CommandItemStyle CssClass="rgCommandRow" />

<FooterStyle BorderStyle="None" CssClass="grid-footer" />

<CommandItemTemplate>

<div>

<asp:LinkButton ID="btnRemoveSelected" runat="server" CommandName="RemoveSelected">

<img style="border:0px;vertical-align:middle;" alt="Remove Selected Items" src="Images/GradientCancel_32x32.png" /> Remove Selected Items</asp:LinkButton>

</div>

</CommandItemTemplate>

<CommandItemSettings ExportToPdfText="Export to PDF" ShowRefreshButton="False" AddNewRecordText="Add Item">

</CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<EditFormSettings EditFormType="Template">

<EditColumn FilterControlAltText="Filter EditCommandColumn column" CancelImageUrl="Cancel.gif"

InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" Visible="true" Display="true">

</EditColumn>

</EditFormSettings>

<ItemStyle BackColor="White" BorderStyle="None" ForeColor="Black" />

<AlternatingItemStyle BackColor="LightGray" BorderStyle="None" ForeColor="Black" />

<EditItemStyle BackColor="Gainsboro" BorderStyle="None" />

<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

<Columns>

<telerik:GridCheckBoxColumn ConvertEmptyStringToNull="False"

FilterControlAltText="Filter checked column" SortExpression="Checked"

UniqueName="Checked">

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="32px" CssClass="grid-header grid-header-first" />

<ItemStyle HorizontalAlign="Center" Width="100%" VerticalAlign="Top" />

</telerik:GridCheckBoxColumn>

<telerik:GridNumericColumn DataField="Quantity" DataType="System.Int16"

DecimalDigits="0" DefaultInsertValue="1"

FilterControlAltText="Filter Quantity column" HeaderText="Quantity"

ShowSortIcon="False" SortExpression="Quantity" UniqueName="Quantity">

<HeaderStyle CssClass="grid-header" HorizontalAlign="Left" Width="80px" Wrap="False" />

<ItemStyle HorizontalAlign="Center" Width="100%" VerticalAlign="Top" />

</telerik:GridNumericColumn>

<telerik:GridBoundColumn DataField="Item" HeaderText="Item" UniqueName="Item"

ConvertEmptyStringToNull="False" EmptyDataText="" SortExpression="Item"

ShowSortIcon="False" ReadOnly="True">

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="180px" CssClass="grid-header" />

<ItemStyle HorizontalAlign="Left" Width="100%" VerticalAlign="Top" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn ConvertEmptyStringToNull="False" DataField="Category" EmptyDataText=""

FilterControlAltText="Filter Category column" HeaderText="Category" SortExpression="Category"

UniqueName="Category" ReadOnly="True">

<HeaderStyle CssClass="grid-header" Width="80px" />

<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100%" />

</telerik:GridBoundColumn>

<telerik:GridNumericColumn dataFormatString="{0:$###,##0.00}" DataField="Price"

DataType="System.Decimal" NumericType="Currency"

HeaderText="Price" SortExpression="Price" UniqueName="Price" Aggregate="Sum"

FooterAggregateFormatString="{0:C}" ReadOnly="True">

<HeaderStyle CssClass="grid-header" Width="60px" />

<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100%" />

</telerik:GridNumericColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" FilterControlAltText="Filter DeleteColumn column"

ImageUrl="Images/305_Close_16x16_72.png" Text="" UniqueName="DeleteColumn" Resizable="false"

ConfirmText="Remove this item?" ConfirmDialogType="RadWindow" ConfirmTitle="Remove"

ShowInEditForm="True">

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="24px" CssClass="grid-header grid-header-last">

</HeaderStyle>

<ItemStyle Width="100%" HorizontalAlign="Right" VerticalAlign="Top" />

</telerik:GridButtonColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

The following CSS is really long but it won't let me attach it, so here it is in code view:

html .RadGrid .rgMasterTable .rgRow .CustomClass,

html .RadGrid .rgMasterTable .rgAltRow .CustomClass, td, tr

{

border:none !important;

border-color: transparent !important;

}

.radgrid .rgMasterTable .rgActiveCell {

border: none !important; }

.radgrid .rgSelectedRow td {

border: none !important; }

.radgrid .rgActiveRow td.rgSorted,

.radgrid .rgSelectedRow td.rgSorted {

border: none !important; }

.radgrid .rgPager .rgPagerButton {

border: none !important;

background: transparent;

color: #fff;

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

.radgrid .rgNumPart a.rgCurrentPage {

border: none !important;

background: transparent; }

.radgrid .rgNumPart a.rgCurrentPage:hover {

border: none !important;

background: transparent; }

.RadMenu_Metro .rgHCMFilter {

/* border-color: #7e7e7e; */

border-color: transparent;

background: transparent;

color: #000;

font-family: "segoe ui",arial,sans-serif;

/* -moz-border-radius: 0;

-webkit-border-radius: 0;

border-radius: 0; */ }

.radgrid .rgGroupPanel caption {

background: transparent;

color: white; }

.grid-header

{

background: url("Images/black-header-bg.jpg") repeat-x scroll 0 0 transparent;

color: white !important;

text-decoration: none !important;

}

.rgCommandCell a

{

text-decoration: none !important;

font-weight: bold !important;

color: White !important;

padding: 5px 5px;

text-align: left

}

.rgCommandRow

{

background: url("Images/black-header-bg-flipv.jpg") repeat-x scroll 0 0 transparent;

/* -moz-border-radius: 0 0 10px 10px !important;

-webkit-border-radius: 0 0 10px 10px !important;

border-radius: 0 0 10px 10px !important; */

height: 42px;

}

.rgDataDiv

{

background-color: dimgrey;

}

.radgrid, .rgHeaderWrapper

{

-moz-border-radius: 10px 10px 0 0 !important;

-webkit-border-radius: 10px 10px 0 0 !important;

border-radius: 10px 10px 0 0 !important;

}

.grid-footer

{

-moz-border-radius: 0 0 10px 10px !important;

-webkit-border-radius: 0 0 10px 10px !important;

border-radius: 0 0 10px 10px !important;

}

.grid-header-first

{

-moz-border-radius: 10px 0 0 0 !important;

-webkit-border-radius: 10px 0 0 0 !important;

border-radius: 10px 0 0 0 !important;

}

.grid-header-last

{

-moz-border-radius: 0 10px 0 0 !important;

-webkit-border-radius: 0 10px 0 0 !important;

border-radius: 0 10px 0 0 !important;

}

table

{

border-collapse: collapse;

border-spacing: 0;

}

.tableHeader

{

color: #800000;

font-family: Verdana, Arial, Helvetica, "Arial Black", sans-serif;

font-size: 10px;

font-weight: bold;

}

.radgrid, .radgrid a, .radgrid input {

color: white; }

.radgrid,

.radgrid .rgMasterTable,

.radgrid .rgDetailTable,

.radgrid .rgGroupPanel table,

.radgrid .rgCommandRow table,

.radgrid .rgEditForm table,

.radgrid .rgPager table {

font-weight: 100;

font-size: 16px;

line-height: 34px;

font-family: "Segoe UI", Arial, Helvetica, sans-serif; }

.radgrid .rgHeader:first-child,

.radgrid th.rgResizeCol:first-child,

.radgrid .rgFilterRow > td:first-child,

.radgrid .rgRow > td:first-child,

.radgrid .rgAltRow > td:first-child {

/* border-left-width: 0; */

padding-left: 8px; }

.radgrid .rgUpdate,

.radgrid .rgCancel,

.radgrid .rgEdit,

.radgrid .rgDel,

.radgrid .rgExpand,

.radgrid .rgCollapse,

.radgrid .rgFilter,

.radgrid .rgAdd,

.radgrid .rgRefresh,

.radgrid .rgSortAsc,

.radgrid .rgSortDesc,

.radgrid .rgUngroup,

.radgrid .rgPagePrev,

.radgrid .rgPageNext,

.radgrid .rgPageFirst,

.radgrid .rgPageLast {

background-image: url('Common/radActionsSprite.png');

width: 21px;

height: 21px; }

.radgrid th.rgSorted {

background-color: #0082cc; }

.radgrid .rgAltRow {

background: #191919;

border-color: transparent;

/* border-color: #191919; */ }

.radgrid .rgAltRow td {

/* border-color: #191919; */

border-color: transparent; }

.radgrid .rgHoveredRow {

background: #383838;

color: white; }

.radgrid .rgHoveredRow td {

/* border-color: #383838; */

border-color: transparent;

}

.radgrid .rgHoveredRow a {

color: white; }

.radgrid td.rgSorted {

background: #191919;

/* border-color: #191919; */

border-color: transparent;

color: white; }

.radgrid .rgAltRow .rgSorted {

background: #2b2b2b;

border-color: transparent;

/* border-color: #2b2b2b; */ }

.radgrid .rgEditRow {

background: #4e4e4e; }

.radgrid .rgDrag {

background-image: url('Grid/rgDrag.gif');

width: 25px;

height: 25px; }

.radgrid .rgFooter td,

.radgrid .rgFooterWrapper {

/* border-top: 1px solid;

border-color: #999999 #e4e4e4; */

border-color: transparent;

}

.radgrid .rgPager .rgStatus {

/* border: solid;

border-color: #4e4e4e;

border-width: 1px 0 0 0; */

border-color: transparent;

}

.radgrid .rgStatus div {

background-image: url('Common/loading_small.gif');

width: 40px; }

.radgrid td.rgPagerCell

{

border-color: transparent;

/* border: solid;

border-color: #4e4e4e;

border-width: 1px 0 0 1px; */ }

.radgrid .rgPager > td > table {

height: 50px; }

.radgrid .rgPager .riTextBox {

height: 29px;

height: 29px; }

.radgrid .rgPager .riSingle .riTextBox {

height: 36px; }

.radgrid .rgInfoPart {

color: #777; }

.radgrid .rgInfoPart strong {

color: white; }

.radgrid .rgWrap {

line-height: 34px; }

.radgrid .rgPagePrev,

.radgrid .rgPageNext,

.radgrid .rgPageFirst,

.radgrid .rgPageLast {

-webkit-border-radius: 16px;

-moz-border-radius: 16px;

border-radius: 16px;

width: 30px;

height: 30px;

/* border: 1px solid #4e4e4e; */

background-color: #222222; }

.radgrid .rgPageFirst {

background-position: -111px -311px; }

.radgrid .rgPagePrev {

background-position: -111px -111px; }

.radgrid .rgPageNext {

background-position: -111px -161px; }

.radgrid .rgPageLast {

background-position: -111px -361px; }

.radgrid .rgPager .rgPagerButton {

/* border-color: #4e4e4e; */

border-color: transparent;

background: #222222;

color: white;

height: 36px;

font-weight: 100;

font-size: 16px;

line-height: 34px;

font-family: "Segoe UI", Arial, Helvetica, sans-serif; }

.radgrid .rgNumPart a {

/* border: 1px solid black; */

line-height: 28px;

min-width: 28px;

padding: 0;

color: white;

-webkit-border-radius: 16px;

-moz-border-radius: 16px;

border-radius: 16px;

text-align: center; }

.radgrid .rgNumPart span {

float: none;

padding: 0; }

.radgrid .rgPager .riTextBox {

vertical-align: top; }

.radgrid .rgHeader .rgSortAsc,

.radgrid .rgHeader .rgSortDesc {

height: 10px;

float: left;

margin: 12px 2px 0 0; }

.radgrid .rgHeader .rgSortAsc {

background-position: -120px -20px; }

.radgrid .rgHeader .rgSortDesc {

background-position: -120px -70px; }

.radgrid .rgFilter {

width: 36px;

height: 36px;

background-position: -107px -3507px;

/* border: 1px solid #4e4e4e; */ }

.radgrid .rgFilterActive,

.radgrid .rgFilterActive:hover {

background-position: -57px -3507px; }

.radgrid .rgFilterBox {

/* border-color: #4e4e4e; */

background-color: black;

font-weight: 100;

font-size: 16px;

line-height: 34px;

font-family: "Segoe UI", Arial, Helvetica, sans-serif;

color: white;

height: 29px; }

.radgrid .rgFilterRow .riSingle .riTextBox {

height: 36px;

vertical-align: top; }

.radgrid .rgGroupPanel {

/* border: 0;

border-bottom: 1px solid #333333; */

padding: 10px;

height: 34px; }

.radgrid .rgGroupPanel td {

/* border: 0; */

padding: 3px 4px; }

* + html .radgrid .rgGroupPanel td td {

line-height: 20px; }

.radgrid .rgGroupPanel .rgSortAsc {

background-position: -114.5px -14.5px; }

.radgrid .rgGroupPanel .rgSortDesc {

background-position: -114.5px -64.5px; }

.radgrid .rgUngroup {

background-position: -114.5px -2664.5px; }

.radgrid .rgGroupItem {

-webkit-border-radius: 16px;

-moz-border-radius: 16px;

border-radius: 16px;

/*border: 1px solid #333333; */

color: white;

padding: 0 5px 1px 10px; }

.radgrid .rgMasterTable td.rgGroupCol,

.radgrid .rgMasterTable td.rgExpandCol {

/* border-color: black;

border-right: 1px solid #333333; */

background-color: black;

border-color: transparent;

}

.radgrid .rgGroupHeader td {

padding: 0;

/* border-bottom: 1px solid #333333;

border-top: 1px solid #333333; */ }

.radgrid .rgGroupHeader {

font-size: 1.1em;

line-height: 34px;

color: white; }

.radgrid .rgExpand {

background-position: -112px -168px; }

.radgrid .rgCollapse {

background-position: -62px -68px; }

.radgrid .rgUpdate {

background-position: -12px -2112px; }

.radgrid .rgUpdate:active {

background-position: -112px -2112px; }

.radgrid .rgCancel {

background-position: -12px -2212px; }

.radgrid .rgCancel:active {

background-position: -112px -2212px; }

.radgrid .rgDetailTable

{

border-color: transparent;

/* border-color: #4e4e4e; */ }

.radgrid .rgCommandRow,

.radgrid .rgCommandRow a {

text-decoration: none; }

.radgrid .rgCommandCell {

/* border: 0;

border-bottom: 1px solid #4e4e4e; */

padding: 0; }

.radgrid .rgCommandTable td {

/* border: 0; */

padding: 2px 7px; }

.radgrid .rgAdd,

.radgrid .rgRefresh {

vertical-align: middle; }

.radgrid input.rgAdd,

.radgrid input.rgRefresh {

margin-right: 3px;

width: 28px;

height: 28px; }

.radgrid input.rgAdd {

-webkit-border-radius: 16px;

-moz-border-radius: 16px;

border-radius: 16px;

/* border: 1px solid white; */

background-position: -112px -2312px; }

.radgrid input.rgRefresh {

-webkit-border-radius: 16px;

-moz-border-radius: 16px;

border-radius: 16px;

/* border: 1px solid white; */

background-position: -112px -1012px; }

.radgrid .rgEdit {

margin-right: 3px;

background-position: -112px -2412px; }

.radgrid .rgDel {

margin-right: 3px;

background-position: -112px -2612px; }

.radgrid .rgExpXLS,

.radgrid .rgExpDOC,

.radgrid .rgExpPDF,

.radgrid .rgExpCSV {

background-image: url('../Common/Grid/export.gif'); }

.radgrid .rgExpXLS {

background-position: 0 0; }

.radgrid .rgExpDOC {

background-position: 0 -50px; }

.radgrid .rgExpPDF {

background-position: 0 -100px; }

.radgrid .rgExpCSV {

background-position: 0 -150px; }

.radgrid .rgHeader:first-child,

.radgrid th.rgResizeCol:first-child,

.radgrid .rgFilterRow > td:first-child,

.radgrid .rgRow > td:first-child,

.radgrid .rgAltRow > td:first-child {

/* border-left-width: 1px; */

padding-left: 7px; }

.radgrid .rgPageFirst {

background-position: -11px -361px; }

.radgrid .rgPageFirst:active {

background-position: -111px -361px; }

.radgrid .rgPagePrev {

background-position: -11px -161px; }

.radgrid .rgPagePrev:active {

background-position: -111px -161px; }

.radgrid .rgPageNext {

background-position: -11px -111px; }

.radgrid .rgPageNext:active {

background-position: -111px -111px; }

.radgrid .rgPageLast {

background-position: -11px -311px; }

.radgrid .rgPageLast:active {

background-position: -111px -311px; }

.radgrid .rgExpand {

background-position: -12px -112px; }

Attached is a screenshot of the resulting grid display.

I had to use a mix of an embedded skin and custom CSS to get the full result. Hope that helps.