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

我正在寻找在我的GridView中正在编辑的行的样式。编辑后的行的自定义样式GridView ASP.NET

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

我的styles.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; 

}

我找不到apropiate CSS样式acomplish我的要求。

来源

2016-03-03 DiegoS

盒的方式 - 阴影？你试过了吗？ –

是的，我做了，但它并没有在网格中产生阴影效果.. – DiegoS

对于外部阴影（如果隐藏在周围的框中），您可以添加：position：relative如果所有元素都是静态的，如果已经定位，则增加z -index值:)你是jsfiddle还是codepen的html/css呈现？ –

您对这种方法有什么看法？

编辑：如果您正在使用表格，您可以通过在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

来源

2016-03-03 02:16:56 Wazaraki

阴影不显示在网格行中，如果我在按钮或div中使用相同的样式它没关系，但它不适用于网格行。 – DiegoS

请看我更新的回答:) – Wazaraki

这种风格正是我在寻找的东西，但它也不管用！ – DiegoS

第一所产生的效果在你的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; 
    }

可以围绕一点玩的边界半径和箱阴影值，使其你最喜欢的

来源

2016-03-03 03:36:51 Creator

该风格不在GridView行中工作..只有背景颜色效果可见.. – DiegoS

@DiegoS然后其他东西一定是错的，因为它的工作。 “你在使用gridview的RowEditing事件吗？“也许你会在其他地方覆盖设置，尝试一个新的表单和一个新的gridview，你会看到它的工作原理 – Creator

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

回答

相关问题