Changing row backcolor breaks hover color

[Terry Webster]

I have an interesting issue.  When I change the backcolor of the row in the ItemDatabound event, the hover color ends up shorter than than the actual row height.

protected void grvGrid_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
       {
           try
           {
               if (e.Item is GridDataItem)
               {

                   GridDataItem item = (GridDataItem)e.Item;
                   string rowIndex = Convert.ToString(((DataTable)grvGrid.DataSource).Rows[e.Item.ItemIndex]["IDKey"]);
                   item.Attributes.Add("onclick", "itemSelected('" + rowIndex + "')");

                   foreach (TableCell cell in e.Item.Cells)
                   {
                       cell.ToolTip = cell.Text.Replace(" ", "").Trim();
                   }

                   if (e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["StatusCD"].ToString().Trim().Equals("Deleted"))
                   {
                       e.Item.BackColor = System.Drawing.Color.LightPink;
                   }

                   if (e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["StatusCD"].ToString().Trim().Equals("Discontinued"))
                   {
                       e.Item.BackColor = System.Drawing.Color.LightGoldenrodYellow;
                   }


               }



           }
           catch (Exception ex)
           {
               Session["ErrorMessage"] = ex.Message;
               Response.Redirect("ErrorPage.aspx");
           }

       }

When the back color gets changed for a row, the hover only covers about 80% of the height of the row.
Any ideas?

[Jayesh Goyani]

Hello,

Please set below css style.

<style>
        .RadGrid .rgHoveredRow
        {
            background-color:Red !important;
        }
    </style>

please change background-color as per your RadGrid Theme.


let me know if any concern.

Thanks,
Jayesh Goyani

[Poulomi]

Hi Jayesh.

I am facing exact same issue like Terry's with my RadGrid on applying a cell color based on some condition like below :

protected void radGrid_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
       {
            if (e.Item is GridDataItem)
               {
                  GridDataItem item = (GridDataItem)e.Item;
                  if(item["SOME_COLUMN"].Text.Equals("SOME_TEXT"))
                    {
                      item["SOME_COLUMN"].Style["background-color"]="green";
                    }
               }
        }

I tried setting the style as you mentioned but that only changes the hover row color. The problem still persists with the new hover color. Also, I am using the Office2010Blue theme.
Please advise how to fix this.

[Eyup]

Hi Poulomi,

There are various ways to achieve this requirement:

Copy Code

Copy Code

Copy Code

GridDataItem item = e.Item as GridDataItem;
string orgClass = e.Item.ItemIndex % 2 == 0 ? "rgRow" : "rgAltRow";
item.CssClass = orgClass + " customClassName";

CSS:

Copy Code

Copy Code

Copy Code

<style type="text/css">
    .RadGrid tr.customClassName {
        background-color: yellow;
    }

    div.RadGrid tr.rgSelectedRow {
        background-color: #828282;
    }
</style>

Another straightforward way to just change the font style is this:

Copy Code

Copy Code

Copy Code

Copy Code

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;
        if (item.ItemIndex % 3 == 0) // custom condition
        {
            item.Font.Bold = true;
        }
    }
}

I hope this will prove helpful.

Regards,
Eyup
Telerik