DataGrid.SelectedItemStyle Propiedad
Definición
Importante
Parte de la información hace referencia a la versión preliminar del producto, que puede haberse modificado sustancialmente antes de lanzar la versión definitiva. Microsoft no otorga ninguna garantía, explícita o implícita, con respecto a la información proporcionada aquí.
Obtiene las propiedades de estilo del elemento seleccionado actualmente en el control DataGrid.
public:
virtual property System::Web::UI::WebControls::TableItemStyle ^ SelectedItemStyle { System::Web::UI::WebControls::TableItemStyle ^ get(); };[System.Web.UI.PersistenceMode(System.Web.UI.PersistenceMode.InnerProperty)]
public virtual System.Web.UI.WebControls.TableItemStyle SelectedItemStyle { get; }[<System.Web.UI.PersistenceMode(System.Web.UI.PersistenceMode.InnerProperty)>]
member this.SelectedItemStyle : System.Web.UI.WebControls.TableItemStylePublic Overridable ReadOnly Property SelectedItemStyle As TableItemStyleValor de propiedad
Objeto TableItemStyle que contiene las propiedades de estilo del elemento seleccionado actualmente en el control DataGrid. El valor predeterminado es un objeto TableItemStyle vacío.
- Atributos
Ejemplos
En el ejemplo de código siguiente se muestra cómo usar SelectedItemStyle la propiedad para establecer el color de fondo del elemento seleccionado en DataGrid amarillo.
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="C#" runat="server">
DataTable Cart = new DataTable();
DataView CartView;
void Page_Load(Object sender, EventArgs e)
{
DataRow dr;
if (Session["ShoppingCart"] == null)
{
Cart.Columns.Add(new DataColumn("Qty", typeof(String)));
Cart.Columns.Add(new DataColumn("Item", typeof(String)));
Cart.Columns.Add(new DataColumn("Price", typeof(String)));
Session["ShoppingCart"] = Cart;
// Create rows and add sample data.
for (int i = 1; i <= 9; i++)
{
dr = Cart.NewRow();
if (i % 2 != 0)
dr[0] = "2";
else
dr[0] = "1";
dr[1] = "Item " + i.ToString();
dr[2] = (1.23 * (i + 1)).ToString();
Cart.Rows.Add(dr);
}
}
else
Cart = (DataTable)Session["ShoppingCart"];
CartView = new DataView(Cart);
CartView.Sort="Item";
if (!IsPostBack)
BindGrid();
}
void MyDataGrid_Select(Object sender, EventArgs e)
{
Label1.Text = "You selected " +
MyDataGrid.SelectedItem.Cells[1].Text +
".<br />" +
MyDataGrid.SelectedItem.Cells[1].Text +
" has an index number of " +
MyDataGrid.SelectedIndex.ToString() + ".";
}
void Select_Button_Click(Object sender, EventArgs e)
{
MyDataGrid.SelectedIndex = 4;
}
void UnSelect_Button_Click(Object sender, EventArgs e)
{
MyDataGrid.SelectedIndex = -1;
Label1.Text = "";
}
void BindGrid()
{
MyDataGrid.DataSource = CartView;
MyDataGrid.DataBind();
}
</script>
<head runat="server">
<title>DataGrid Selection Example</title>
</head>
<body>
<form id="form1" runat="server">
<h3>DataGrid Selection Example</h3>
<asp:DataGrid id="MyDataGrid" runat="server"
BorderColor="black"
BorderWidth="1"
CellPadding="3"
Font-Names="Verdana"
Font-Size="8pt"
OnSelectedIndexChanged="MyDataGrid_Select"
AutoGenerateColumns="false">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<SelectedItemStyle BackColor="Yellow">
</SelectedItemStyle>
<Columns>
<asp:ButtonColumn
HeaderText="Select Item"
ButtonType="LinkButton"
Text="Select"
CommandName="Select">
</asp:ButtonColumn>
<asp:BoundColumn
HeaderText="Item"
ReadOnly="true"
DataField="Item"/>
<asp:BoundColumn
HeaderText="Quantity"
DataField="Qty"/>
<asp:BoundColumn
HeaderText="Price"
DataField="Price"/>
</Columns>
</asp:DataGrid>
<br /><br />
<asp:Button id="Button1"
Text="Select Item 5"
OnClick="Select_Button_Click"
runat="server"/>
<asp:Button id="Button2"
Text="Unselect Item"
OnClick="UnSelect_Button_Click"
runat="server"/>
<br /><br />
<asp:Label id="Label1" runat="server"/>
</form>
</body>
</html>
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="VB" runat="server">
Dim Cart As New DataTable
Dim CartView As DataView
Sub Page_Load(sender As Object, e As EventArgs)
Dim dr As DataRow
If Session("ShoppingCart") Is Nothing Then
Cart.Columns.Add(New DataColumn("Qty", GetType(String)))
Cart.Columns.Add(New DataColumn("Item", GetType(String)))
Cart.Columns.Add(New DataColumn("Price", GetType(String)))
Session("ShoppingCart") = Cart
' Create rows and add sample data.
Dim i As Integer
For i = 1 To 9
dr = Cart.NewRow()
If i Mod 2 <> 0 Then
dr(0) = "2"
Else
dr(0) = "1"
End If
dr(1) = "Item " & i.ToString()
dr(2) =(1.23 *(i + 1)).ToString()
Cart.Rows.Add(dr)
Next i
Else
Cart = CType(Session("ShoppingCart"), DataTable)
End If
CartView = New DataView(Cart)
CartView.Sort = "Item"
If Not IsPostBack Then
BindGrid()
End If
End Sub 'Page_Load
Sub MyDataGrid_Select(sender As Object, e As EventArgs)
Label1.Text = "You selected " & MyDataGrid.SelectedItem.Cells(1).Text & _
".<br />" & MyDataGrid.SelectedItem.Cells(1).Text & " has an index number of " & _
MyDataGrid.SelectedIndex.ToString() & "."
End Sub 'MyDataGrid_Select
Sub Select_Button_Click(sender As Object, e As EventArgs)
MyDataGrid.SelectedIndex = 4
End Sub 'Select_Button_Click
Sub UnSelect_Button_Click(sender As Object, e As EventArgs)
MyDataGrid.SelectedIndex = - 1
Label1.Text = ""
End Sub 'UnSelect_Button_Click
Sub BindGrid()
MyDataGrid.DataSource = CartView
MyDataGrid.DataBind()
End Sub 'BindGrid
</script>
<head runat="server">
<title>DataGrid Selection Example</title>
</head>
<body>
<form id="form1" runat="server">
<h3>DataGrid Selection Example</h3>
<asp:DataGrid id="MyDataGrid" runat="server"
BorderColor="black"
BorderWidth="1"
CellPadding="3"
Font-Names="Verdana"
Font-Size="8pt"
OnSelectedIndexChanged="MyDataGrid_Select"
AutoGenerateColumns="false">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<SelectedItemStyle BackColor="Yellow">
</SelectedItemStyle>
<Columns>
<asp:ButtonColumn
HeaderText="Select Item"
ButtonType="LinkButton"
Text="Select"
CommandName="Select">
</asp:ButtonColumn>
<asp:BoundColumn
HeaderText="Item"
ReadOnly="true"
DataField="Item"/>
<asp:BoundColumn
HeaderText="Quantity"
DataField="Qty"/>
<asp:BoundColumn
HeaderText="Price"
DataField="Price"/>
</Columns>
</asp:DataGrid>
<br /><br />
<asp:Button id="Button1"
Text="Select Item 5"
OnClick="Select_Button_Click"
runat="server"/>
<asp:Button id="Button2"
Text="Unselect Item"
OnClick="UnSelect_Button_Click"
runat="server"/>
<br /><br />
<asp:Label id="Label1" runat="server"/>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="True"%>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DataGrid SelectedItemStyle Example</title>
<script runat="server">
ICollection CreateDataSource()
{
// Create sample data for the DataGrid control.
DataTable dt = new DataTable();
DataRow dr;
// Define the columns of the table.
dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
// Populate the table with sample values.
for (int i = 0; i < 9; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Item " + i.ToString();
dr[2] = 1.23 * (i + 1);
dt.Rows.Add(dr);
}
// Create a DataView from the DataTable.
DataView dv = new DataView(dt);
return dv;
}
void Page_Load(Object sender, EventArgs e)
{
// Load sample data only once when the page is first loaded.
if (!IsPostBack)
{
ItemsGrid.DataSource = CreateDataSource();
ItemsGrid.DataBind();
}
}
void IndexChange_Command(Object sender, EventArgs e)
{
// Display the details of the selected item.
DetailsLabel.Text = "Item Number: " + ItemsGrid.SelectedItem.Cells[1].Text + "<br />" +
"Description: " + ItemsGrid.SelectedItem.Cells[2].Text + "<br />" +
"Price: $" + ItemsGrid.SelectedItem.Cells[3].Text + "<br />";
}
void Selection_Change(Object sender, EventArgs e)
{
// Set the background color for the paging controls section of
// the DataGrid control.
ItemsGrid.SelectedItemStyle.BackColor = System.Drawing.Color.FromName(List.SelectedItem.Value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>DataGrid SelectedItemStyle Example</h3>
Select an item and a backcolor for the selected item.
<br /><br />
<asp:DataGrid id="ItemsGrid"
BorderColor="Black"
ShowFooter="False"
CellPadding="3"
CellSpacing="0"
HeaderStyle-BackColor="#aaaadd"
OnSelectedIndexChanged="IndexChange_Command"
runat="server">
<SelectedItemStyle BackColor="White">
</SelectedItemStyle>
<Columns>
<asp:ButtonColumn Text="Select"
CommandName="Select"/>
</Columns>
</asp:DataGrid>
<hr />
<table style="border-color:Black; border-width:1" cellspacing="0">
<tr style="background-color:#aaaadd">
<td>
Details
</td>
</tr>
<tr>
<td>
<asp:Label id="DetailsLabel"
runat="server"
Text="No item selected."/>
</td>
</tr>
</table>
<table cellpadding="5">
<tr>
<td>
Backcolor:
</td>
</tr>
<tr>
<td>
<asp:DropDownList id="List"
AutoPostBack="True"
OnSelectedIndexChanged="Selection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White"> White </asp:ListItem>
<asp:ListItem Value="Silver"> Silver </asp:ListItem>
<asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</form>
</body>
</html>
<%@ Page Language="VB" AutoEventWireup="True"%>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DataGrid SelectedItemStyle Example</title>
<script runat="server">
Function CreateDataSource() As ICollection
' Create sample data for the DataGrid control.
Dim dt As DataTable = New DataTable()
Dim dr As DataRow
' Define the columns of the table.
dt.Columns.Add(New DataColumn("IntegerValue", GetType(Integer)))
dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
' Populate the table with sample values.
Dim i As Integer
For i = 0 to 8
dr = dt.NewRow()
dr(0) = i
dr(1) = "Item " & i.ToString()
dr(2) = 1.23 * (i + 1)
dt.Rows.Add(dr)
Next i
' Create a DataView from the DataTable.
Dim dv As DataView = New DataView(dt)
Return dv
End Function
Sub Page_Load(sender As Object, e As EventArgs)
' Load sample data only once when the page is first loaded.
If Not IsPostBack Then
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End If
End Sub
Sub IndexChange_Command(sender As Object, e As EventArgs)
' Display the details of the selected item.
DetailsLabel.Text = "Item Number: " & ItemsGrid.SelectedItem.Cells(1).Text & "<br />" & _
"Description: " & ItemsGrid.SelectedItem.Cells(2).Text & "<br />" & _
"Price: $" & ItemsGrid.SelectedItem.Cells(3).Text & "<br />"
End Sub
Sub Selection_Change(sender As Object, e As EventArgs)
' Set the background color for the paging controls section of
' the DataGrid control.
ItemsGrid.SelectedItemStyle.BackColor = System.Drawing.Color.FromName(List.SelectedItem.Value)
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>DataGrid SelectedItemStyle Example</h3>
Select an item and a backcolor for the selected item.
<br /><br />
<asp:DataGrid id="ItemsGrid"
BorderColor="Black"
ShowFooter="False"
CellPadding="3"
CellSpacing="0"
HeaderStyle-BackColor="#aaaadd"
OnSelectedIndexChanged="IndexChange_Command"
runat="server">
<SelectedItemStyle BackColor="White">
</SelectedItemStyle>
<Columns>
<asp:ButtonColumn Text="Select"
CommandName="Select"/>
</Columns>
</asp:DataGrid>
<hr />
<table style="border-color:Black; border-width:1" cellspacing="0">
<tr style="background-color:#aaaadd">
<td>
Details
</td>
</tr>
<tr>
<td>
<asp:Label id="DetailsLabel"
runat="server"
Text="No item selected."/>
</td>
</tr>
</table>
<table cellpadding="5">
<tr>
<td>
Backcolor:
</td>
</tr>
<tr>
<td>
<asp:DropDownList id="List"
AutoPostBack="True"
OnSelectedIndexChanged="Selection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White"> White </asp:ListItem>
<asp:ListItem Value="Silver"> Silver </asp:ListItem>
<asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</form>
</body>
</html>
Comentarios
Utilice la SelectedItemStyle propiedad para proporcionar un estilo personalizado para el elemento seleccionado en el DataGrid control . Entre los atributos de estilo comunes que se pueden ajustar se incluyen forecolor, backcolor, font y alineación de contenido dentro de la celda. Proporcionar un estilo diferente mejora la apariencia del DataGrid control.
Las propiedades de estilo de elemento del DataGrid control se heredan de una propiedad de estilo de elemento a otra a través de una jerarquía. Las propiedades de estilo de elemento establecidas en la jerarquía se heredan por propiedades de estilo de elemento superiores en la jerarquía. Por ejemplo, si especifica una fuente roja para la ItemStyle propiedad , todas las demás propiedades de estilo de elemento del DataGrid control también tendrán una fuente roja. Esto le permite proporcionar una apariencia común para el control estableciendo una propiedad de estilo de elemento único. Puede invalidar la configuración de estilo heredada para una propiedad de estilo de elemento que sea superior en la jerarquía estableciendo sus propiedades de estilo. Por ejemplo, puede especificar una fuente azul para la AlternatingItemStyle propiedad , reemplazando la fuente roja especificada en la ItemStyle propiedad . En la tabla siguiente se muestra el orden de jerarquía de mayor a menor.
| Prioridad | Style (propiedad) |
|---|---|
| 1 | EditItemStyle |
| 2 | SelectedItemStyle |
| 3 | AlternatingItemStyle |
| 4 | ItemStyle |
| 5 | ControlStyle |
Para especificar un estilo personalizado para el elemento seleccionado, coloque las <SelectedItemStyle> etiquetas entre las etiquetas de apertura y cierre del DataGrid control. A continuación, puede enumerar los atributos de estilo dentro de la etiqueta de apertura <SelectedItemStyle> .