Changing row backcolor breaks hover color

4 posts, 0 answers
  1. Terry Webster
    Terry Webster avatar
    21 posts
    Member since:
    Dec 2009

    Posted 15 Sep 2011 Link to this post

    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?
  2.
  3. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 15 Sep 2011 Link to this post

    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
  5. Poulomi
    Poulomi avatar
    4 posts
    Member since:
    Oct 2015

    Posted 10 May 2016 in reply to Jayesh Goyani Link to this post

    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.

  7. Eyup
    Admin
    Eyup avatar
    4072 posts

    Posted 13 May 2016 Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top