select

Grid / Selected Rows Style

Rate this demo: Feedback
Run example in: C# VB.NET Change Skin:
Vista
  • BlackBlack
  • DefaultDefault
  • ForestForest
  • HayHay
  • Office2007Office2007
  • OutlookOutlook
  • SimpleSimple
  • SitefinitySitefinity
  • SunsetSunset
  • TelerikTelerik
  • VistaVista
  • Web20Web20
  • WebBlueWebBlue
  • Windows7Windows7
CustomerIDCompanyNameContactNameContactTitleAddressPostalCode
 Page 1 of 10, items 1 to 10 of 91.
ALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 5712209
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 222205021
ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 231205023
AROUTAround the HornThomas HardySales Representative120 Hanover Sq.WA1 1DP
BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8S-958 22
BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 5768306
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place Kléber67000
BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 6728023
BONAPBon app'Laurence LebihanOwner12, rue des Bouchers13008
BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.T2F 8M4


Example Source Code & Description

Instructions
Open in new window
  • This example demonstrates how to customize the appearance of the selected rows using the SelectedItemStyle property. Below is a code extraction from the html of the page:

    <SelectedItemStyle CssClass="SelectedItem"></SelectedItemStyle>

    <style type="text/css">
    .SelectedItem
    {
    background-image: url(img/SelectedRow.gif);
    background-repeat: no-repeat;
    background-position: top right;
    }
    </style>

    The other option (when skin is applied for the control) is to alter directly the SelectedRow_[SkinName] class residing in the RadControls/Grid/Skins/[SkinName]/Styles.css file. This is how the aforementioned class look like for the Default grid skin:

    .SelectedRow_Default td
    {
    background: #e5e5e5 !important;
    height: 22px;
    border: solid 1px #e5e5e5;
    border-top: solid 1px #e9e9e9;
    border-bottom: solid 1px white;
    padding-left: 4px;
    }

    Additional details about how to modify the existing grid skins you can find in this article from the product online documentation:
    Modify existing skins
Compatible with ASP.NET 2.0, 3.5 AJAX enabled Accessibility Verified!Valid XHTML 1.1! Optimized for Visual Studio 2005, 2008
Copyright 2002-2010 © Telerik. All right reserved  | 
Telerik Inc., 460 Totten Pond Rd, Suite 640, Waltham, MA 02451

www.telerik.com  |  Terms of Use  |  Contact Us