asp.net c# tutorials and examples code for web developers

Change GridView selected row background color in asp.net c#

How to set change GridView selected row background color programmatically in asp.net
gridview is a data web server control in asp.net development tools. it show tabular data. so gridview can present data as table columns and rows. you can make easily a gridview row selectable by set it AutoGenerateSelectButton property value to true. for better user experience you can design your gridview by setting different background color for selected row. when someone select a row from gridview then the selected row's background color will be change. so they can easily identify which row is selected.

to setup selected row different background color we only assign the gridview selectedrowstyle backcolor property value. in this example we present it by a simple button click event. when you click the button, the gridview selected row background color will be change programmatically.
GridViewSelectedRowBackColor.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Drawing" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        GridView1.SelectedRowStyle.BackColor = Color.Crimson;
    }    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>How to set change GridView selected row background color programmatically in asp.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Navy; font-style:italic;">GridView Example: Change Selected Row Back Color</h2>
        <asp:SqlDataSource 
            ID="SqlDataSource2"
            runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="Select ProductID, ProductName, UnitPrice From Products"
            CancelSelectOnNullParameter="false"
            >
        </asp:SqlDataSource>
        <asp:GridView 
            ID="GridView1"
            runat="server"
            DataSourceID="SqlDataSource2"
            AllowPaging="true"
            Width="525"
            ForeColor="Snow"
            BackColor="OrangeRed"
            BorderColor="Orange"
            AutoGenerateColumns="false"
            Font-Names="Comic Sans MS"
            AutoGenerateSelectButton="true"
            >
            <SelectedRowStyle BackColor="Orange" />
            <PagerStyle 
                ForeColor="PeachPuff" 
                Height="40"
                BackColor="SaddleBrown"
                Font-Size="Large"
                VerticalAlign="Top"
                HorizontalAlign="Center"
                />
            <HeaderStyle 
                BackColor="DeepPink" 
                Height="35"
                Font-Italic="false" 
                ForeColor="Snow" 
                />
            <Columns>
                <asp:BoundField DataField="ProductID" HeaderText="Product ID" ReadOnly="true" />
                <asp:BoundField DataField="Productname" HeaderText="Product Name" />
                <asp:BoundField DataField="UnitPrice" HeaderText="Unit Price" />
            </Columns>        
        </asp:GridView>
        <br /><br />
        <asp:Button 
            ID="Button1" 
            runat="server"
            Text="Change Selected Row Back Color"
            Font-Bold="true"
            Height="45"
            ForeColor="Crimson"
            OnClick="Button1_Click"
            />        
    </div>
    </form>
</body>
</html>
Related asp.net examples