编辑行 GridView ASP.NET 的自定义样式答案

【问题标题】：Custom style for edited row GridView ASP.NET编辑行 GridView ASP.NET 的自定义样式
【发布时间】：2016-03-03 11:36:51
【问题描述】：

我正在寻找在我的 GridView 中正在编辑的行的样式。

我知道如何更改背景颜色和字体，但我需要让它看起来像在网格上，就像有阴影一样，必须真正突出显示编辑的行。

我的样式.css：

.grid_normalRow /*on mouse out event*/
{
       background-color:white;
}
.grid_highlightedRow /*on mouse over event*/
{
       background-color:aqua;
}
.grid_editedRow /*on row editing event - The one i need to change */
{
       background-color:yellow;
       font-weight: bold;
       height: 30px;

}

我找不到合适的 css 样式来满足我的要求。

【问题讨论】：

盒子阴影？你试过了吗？
是的，我做到了，但它没有在网格中制作阴影效果..
对于外部阴影（如果被周围的框隐藏），您可以添加： position:relative 如果所有元素都是静态的，如果已经定位，则增加 z-index 值:) 你是 jsfiddle 还是html/css 的 codepen 渲染？
z-index 是一个很好的尝试，但也没有用.. 可能是网格不允许某些样式..

标签： c# css asp.net vb.net gridview

【解决方案1】：

你觉得这个方法怎么样？

编辑：如果您使用的是表格，则可以通过在 tr 上添加 display: block 来使 Box Shadow 工作。我更新了Codepen 来展示它是如何工作的。

.grid_editedRow
/*The one i need to change*/

{
  background-color: lemonchiffon;
  font-weight: bold;
  height: 30px;
  border: 1px solid;
  box-shadow: 0 0 5px black;
}
.grid_normalRow
/*on mouse out event*/

{
  /* adding bg color messes with the shadow effect */
  /* background-color:white; */
}
.grid_highlightedRow
/*on mouse over event*/

{
  background-color: aqua;
}
tr {
  display: block;
}

<table>
  <tr class="grid_normalRow">
    <td>yet</td>
    <td>another</td>
    <td>grid</td>
    <td>row</td>
  </tr>
  <tr class="grid_editedRow">
    <td>Hi</td>
    <td>How</td>
    <td>Are</td>
    <td>you?</td>
  </tr>
  <tr class="grid_normalRow">
    <td>yet</td>
    <td>another</td>
    <td>grid</td>
    <td>row</td>
  </tr>
  <tr class="grid_highlightedRow">
    <td>yet</td>
    <td>another</td>
    <td>grid</td>
    <td>row</td>
  </tr>
</table>

你可以在这个Codepen看到产生的效果

【讨论】：

阴影不显示在网格行中，如果我在按钮或 div 中使用相同的样式没关系，但它不适用于网格行。
这种风格正是我想要的，但它也不起作用！
如果没有看到 HTML 的一部分，就很难知道它为什么不起作用。您能否添加有关生成的 HTML 的更多详细信息？
检查：postimg.org/image/k280nuxeb 和 postimg.org/image/40cnnb4il。查看结果..生成的 HTML 不是真正可读的，因为它有很多自动生成的代码..
我明白了。也许将display: block 添加到所有、.grid_normalRow、.grid_editedRow 和 .grid_highlightedRow 将解决问题。网格中的每一行都有这样的属性是至关重要的。

【解决方案2】：

首先在 gridview 行编辑功能中设置行的 css。

    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        GridView1.EditRowStyle.CssClass = "EditRow";
        GridView1.DataBind();
    }

然后你将css设置为

    .EditRow 
    {
    background-color:yellow;
    border-radius: 5px;
    box-shadow: 1px 1px 6px 4px #000;
    font-weight: bold;
    height: 30px;
    }

您可以稍微调整一下border-radius 和box-shadow 的值，使其成为您最喜欢的方式

【讨论】：

该样式在 GridView 行中不起作用..只有背景色效果可见..
@DiegoS 那么其他的东西一定是错的，因为它的工作。 “你在使用 gridview 的 RowEditing 事件吗？”也许你会覆盖其他地方的设置。在新表单和新网格视图上尝试一下，您会发现它有效