ASP.NET Grid Demo - Rows - Selected Rows Style

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">
        div.RadGrid_Vista .SelectedItem
        {
            background: #CCCCCC;
        }
        div.RadGrid_Vista .SelectedItem td
        {
            border-color: #CCCCCC;
        }
    </style>

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

    <style type="text/css">
        .RadGrid_[SkinName] .rgSelectedRow
        {
            background: #e5e5e5 !important;
            height: 22px;
            border: solid 1px #e5e5e5;
            border-top: solid 1px #e9e9e9;
            border-bottom: solid 1px white;
            padding-left: 4px;
        }
    </style>

Source Code

C# VB.NET

Show code in new window Demo isolation steps

<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.Styles.SelectedRowStyle.DefaultVB" CodeFile="DefaultVB.aspx.vb" %> <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %> <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %> <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %> <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %> <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag> <style type="text/css"> div.RadGrid_Vista .SelectedItem { background: #CCCCCC; } div.RadGrid_Vista .SelectedItem td { border-color: #CCCCCC; } </style> </head> <body class="BODY"> <form runat="server" id="mainForm" method="post"> <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowSkinChooser="false"></telerik:Header> <telerik:RadScriptManager ID="RadScriptManager" runat="server"> </telerik:RadScriptManager>  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadGrid1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AllowPaging="True" PageSize="10" Width="97%" AllowMultiRowSelection="True" GridLines="None" Skin="Vista"> <PagerStyle Mode="NumericPages" /> <ClientSettings EnableRowHoverStyle="true"> <Selecting AllowRowSelect="true" /> </ClientSettings> <SelectedItemStyle CssClass="SelectedItem" /> <MasterTableView> <Columns> <telerik:GridClientSelectColumn> </telerik:GridClientSelectColumn> </Columns> </MasterTableView> </telerik:RadGrid> <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers" runat="server"></asp:SqlDataSource>  <telerik:Footer runat="server" ID="Footer1"></telerik:Footer> </form> </body> </html>

Developer Tools

Web UI Controls & Components

Desktop UI Controls & Components

Mobile UI Controls & Components

Report Designer & Viewer

Data Access

Visual Studio Productivity Plugins

HTML5/JavaScript Widgets

Agile Project Management

Automated Testing

Web Content Management

SharePoint

Give your Feedback:

Grid / Selected Rows Style

Source Code

Get more than expected!