Custom style for edited row GridView ASP.NET

Question

Im looking for styling the row that's being edited in my GridView.

I know how to change the background colour and the font, but what i need is it to look like it's over the grid, like with a shadow, the edited row must be really highlighted.

My 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;

}

I can't find the apropiate css style to acomplish my requirement.

yes i did, but it's not making the shadow effect in the Grid.. — DiegoS
– DiegoS, Commented Mar 3, 2016 at 2:22
for an outside shadow(if hidden by boxes around), you can add : position:relative if all element are statics, if already positioned, increase the z-index value :) do you a jsfiddle or codepen of html/css rendered ? — G-Cyrillus
– G-Cyrillus, Commented Mar 3, 2016 at 2:27
z-index was a good try, but didnt work either.. maybe it's the grid that doesnt allow some styles.. — DiegoS
– DiegoS, Commented Mar 3, 2016 at 2:50

G-Cyrillus · Accepted Answer · 2016-03-03 03:02:08Z

1

What do you think about this method?

EDIT: If you are using a table, you can make Box Shadow work by adding display: block on the tr's. I updated the Codepen to show how it works.

.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>

You can see the resulting effect in this Codepen

edited Mar 3, 2016 at 3:02

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

answered Mar 3, 2016 at 2:16

Wazaraki

5042 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

DiegoS Over a year ago

The shadow doesnt display in the grid row, if i use the same style in a button or a div it's ok, but it's not working for the grid row.

DiegoS Over a year ago

That style is exactly what im looking for, but it's not working either!

Wazaraki Over a year ago

It's difficult to know why it's not working without seeing a portion of the HTML. Can you add more details about the generated HTML?

DiegoS Over a year ago

Check: postimg.org/image/k280nuxeb and postimg.org/image/40cnnb4il. to see the result.. The generated HTML is not really readable as it has a lot of autogenerated code..

Wazaraki Over a year ago

I see. Maybe adding display: block to all, .grid_normalRow, .grid_editedRow and .grid_highlightedRow will fix the issue. It's critical that every row in the grid has such property.

|

Creator · Accepted Answer · 2016-03-03 03:36:51Z

0

first in your gridview row edit function you set the css of the row.

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

then you set the css to

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

you can play around a little with the border-radius and the box-shadow values to make it the way you like the most

answered Mar 3, 2016 at 3:36

Creator

1,4994 gold badges17 silver badges30 bronze badges

2 Comments

DiegoS Over a year ago

That style is not working in the GridView row.. only the background-color efect is visible..

Creator Over a year ago

@DiegoS then something else must be wrong because its working. " Are you using the RowEditing event of the gridview ?"maybe you overwrite the settings somewhere else. try it on a new form and a new gridview and you will see it works

Collectives™ on Stack Overflow

Custom style for edited row GridView ASP.NET

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related