如何为GridView中的特定行指定CSS类?

时间:2010-03-05 21:54:19

标签: asp.net gridview css

我正在使用C#创建SharePoint Web部件,其中一部分将GridView控件输出到页面。虽然我可以通过设置GridView本身的CSS类来对其显示方式进行相当广泛的控制,但我真正想要做的是能够为某些特定的td元素指定类。我不知道该怎么做,或者在GridView填充行时,或者在GridView添加到页面时完成。

在伪代码中,我基本上设想的是能够说出像gridView.Row[4].CssClass = "header"这样的东西,它会将GridView中第五行的td设置为类“header”。

我已经研究过使用RowDataBound事件,所以我只是使用以下内容来测试它:

protected void outputGrid1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    e.Row.CssClass = "outputHeader";
}

这可能是我对如何正确使用它的误解,但它似乎没有做任何事情。我认为它会将所有行设置为类“header”,如果有的话,我将从那里开始处理我的逻辑,但我甚至无法让它工作。感谢任何人都能提供的帮助!

2 个答案:

答案 0 :(得分:17)

我使用RowDataBound执行类似的操作:

if (e.Row.RowType == DataControlRowType.DataRow)
{
    // Check the XXXX column - if empty, the YYYY needs highlighting!
    if (e.Row.Cells[6].Text == " ")
    {
       e.Row.CssClass = "highlightRow"; // ...so highlight it
    }
}

检查你正在做的事情是否正确的一种方法是通过浏览器监控你的html输出...像Firebug这样的东西确实有帮助。

这是一些示例CSS,我们将CssClass的'dataGrid'分配给Grid:

/* Used to highlight rows */
table.dataGrid tr.highlightRow td
{
    background-color: #FF6666;
    border-bottom: 1px solid #C0C0FF;
}

更新:连接所有这些:我在aspx页面上使用自动连线。您的页面声明如下所示:

<%@ Page Language="C#" MasterPageFile="~/XXXXXX.master" AutoEventWireup="true" CodeBehind="YYYY.aspx.cs" Inherits="ZZZ.ZZZ.AAAAAA" Title="View Blah" %>

页面上的此设置允许您使用UI连接事件。单击网格,选择属性,单击闪电图标,然后在RowDataBound事件下,选择您的方法。所有这些在幕后做的是向DataGridView添加一个属性,因此:

        <asp:GridView ID="uiActionGridView" runat="server" AllowSorting="True" AutoGenerateColumns="False"
        OnRowDataBound="uiActionGridView_RowDataBound" OnDataBound="uiActionGridView_DataBound">
  • 这显示了两个正在连接的事件,即DataBound和RowDataBound事件。

这就是我使用VS2005做的事情,它似乎只是“正常工作”。我能想到的唯一一件事就是在数据绑定发生后手动绑定事件

答案 1 :(得分:0)

可选!您还可以在代码后面添加bootstrap类,例如...

protected void gvEmpContactsHistory_SelectedIndexChanged(object sender, EventArgs e)
    {
        string val = Convert.ToDateTime(gvEmpContactsHistory.SelectedDataKey.Value).ToString("dd-MM-yyyy hh:mm:ss", new System.Globalization.CultureInfo("en-US"));
        GetEmployeeDetail(val);

        foreach (GridViewRow row in gvEmpContactsHistory.Rows)
        {
            if (row.RowIndex == gvEmpContactsHistory.SelectedIndex)
            {
                row.ToolTip = string.Empty;
                row.Attributes.Add("class", "btn-success");
            }
            else
            {
                row.ToolTip = "Click to select this row.";
                row.Attributes.Add("class", "btn-outline-success");
            }
        }
    }