This is a migrated thread and some comments may be shown as answers.

Row Hover When Row Wraps Only Colors First Line of Text

9 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rodney Foley
Top achievements
Rank 1
Rodney Foley asked on 11 Dec 2018, 05:22 PM

I have a RadGrid inside a UserControl where I change the BackColor of each GridDataItem (aka row) based on a value in a cell so the users know the urgency of the rows data. If it is outside the bounds we don't change anything.

However when a row wraps around due to a cell with more text than width on the cells that I changed the background color of based on a cell value when you hover the mouse over the row it only highlights the first line of text in the row with the highlight hover color. Then on the rows we didn't change the background color of when you mouse over the row highlights correctly the full height of the row not just the first line of text.

I am following recommend way of changing the BackColor of a GridDataItem from a Telerik response to another thread in this forum.  Basically in the OnItemDataBound event I do the following:

if (goal <= 0.0)
    dataItem.BackColor = Color.FromName("#ffb2ae"); // Pastel Red
else if (goal > 0.0 && goal < 3.0)
    dataItem.BackColor = Color.FromName("#ffd394"); // Pastel Orange
else if (goal >= 3.0 && goal < 7)
    dataItem.BackColor = Color.FromName("#fdfd96"); // Pastel Yellow
else if (goal >= 7.0 && goal < 10)
    dataItem.BackColor = Color.FromName("a0e7a0"); // Pastel Green

 

See attached images for examples of output results. 

Any help to make the default hover color fill the full height of the cell when the BackColor is changed for a GridDataItem is greatly appreciated.

 

9 Answers, 1 is accepted

Sort by
0
Rodney Foley
Top achievements
Rank 1
answered on 11 Dec 2018, 05:41 PM

I have also tried the following:

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

 

And it only colored everything but the first line, see attached for example.

 

 

 

0
Rodney Foley
Top achievements
Rank 1
answered on 11 Dec 2018, 05:58 PM

What was missing from my previous style was that you MUST set the BG image to none.  Which then will allow filling with your specified bg color.  Below is the change that ended up working. I don't want yellow, just used it as a good contrasting color to verify with. :)

.RadGrid .rgHoveredRow
{
    background-color:LightYellow !important;
    background-image:none !important;
}

 

I personally think this is a bug in the grid as it should be able to properly filly the whole row with the default color when the mouse hovers over a row.

0
Attila Antal
Telerik team
answered on 14 Dec 2018, 05:18 PM
Hi Rodney,

By design, alternate rows in RadGrid have additional color applied, and those rules are applied to the cell (td) elements of the row. While the code snippets you have shared, apply colors to the row (tr) element resulting in an unexpected appearance.

You can eliminate this conflict by overriding the cell's background styling, and make the cells be transparent, thus the color underneath the cell will be visible instead.
<style>
    html body .RadGrid .rgAltRow > td {
        background-color: transparent;
    }
 
    html body .RadGrid .rgHoveredRow > td {
        background-color:blueviolet;
    }
</style>

You can also follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post to understand more about overriding CSS rules.

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 


I hope this will help resolve the appearance issue.

Kind regards,
Attila Antal
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Rodney Foley
Top achievements
Rank 1
answered on 15 Dec 2018, 12:45 AM

Hi Attila, 

Not sure why you are talking about alternate rows as I didn't bring up any issue with that my issue as detailed above is about coloring and Hovered Row. Maybe you meant to answer another question.  I worked around the issue and there is clearly what I believe to be a bug. 

Thanks for the link for the DevTools and the other CSS ones, but I have a decent grasp of CSS rules and overriding them as I had to do that to work around the bug with the Hover Row.

0
Attila Antal
Telerik team
answered on 19 Dec 2018, 06:15 PM
Hi Rodney,

Based on all the information I had so far, I am assuming that the alternate rows are conflicting. I would be able to give you a more accurate answer if I get more details about the issue.  You can try to isolate the problem into a runnable sample project and share it with us. To save you some time, I have created a similar sample that you can use to edit instead of creating a new project. Please download the attached project, add the telerik assemblies and modify it to replicate the issue. Once you're ready, send it back to us and we'll take a closer look.

Kind regards,
Attila Antal
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Rodney Foley
Top achievements
Rank 1
answered on 21 Dec 2018, 04:27 AM

I don't have time for that, as I have already moved on with my posted workaround and I am not sure how or why alternating row colors when I override the color and when the issue I bring up only occurs on HOVER.  This doesn't seem to be related to what you are stating. Not to mention I provided all the data anyone who knows how to use a RadGrid would need to reproduce it.  I posted the link to the thread I used to change the color of rows and I provided the changes to that. Then I provided the styles that worked around the issue.  Feel free to take it from here and reproduce the issue on your own as regardless of what the root cause of the issue it is a bug.

0
Attila Antal
Telerik team
answered on 27 Dec 2018, 08:01 AM
Hi Rodney,

In most cases, using strong CSS selectors, you can omit the "!important" declaration from the rules and override the built-in styles without it.

If you believe there is a bug in our application, we would require runnable sample or the complete steps to replicate the issue and debug it locally. After the evaluation of the problem, if it turns out to be a bug, we will reward you with Telerik points which you could use to get discount on our products.

Kind regards,
Attila Antal
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Rodney Foley
Top achievements
Rank 1
answered on 30 Dec 2018, 01:41 AM

Gee thanks for the CSS tip as it has nothing to do with this thread.

I know this is a bug, much more than a simple belief.  If you cannot make a runnable sample from the data I provided in this thread plus the one linked then you are too lazy or you don't care about bugs in your product.  I don't have unlimited time to do my job and your job so please do your job take the data and repro the issue in-house and only ask for a runnable sample if you cannot from the data provided.

By the time you replied, I had already moved on and resolved as I posted the resolution. So either the bug with the data provided and repro it in-house or don't I don't care at this point. Either you care about bugs or you don't and either you care about making bug reporting as easy as possible for customers or you don't. So far it seems like you don't care about either.

Anyway, I am no longer going to monitor and reply to this thread, it is all on you and Telerik to move forward or not with the bug report.

 

0
Attila Antal
Telerik team
answered on 02 Jan 2019, 12:21 PM
Hi Rodney,

We've made several more tests using different configurations and render modes and we found the missing piece to replicate the error which I believe is the case. The issue appears to be when applying custom background colors while the RadGrid uses the Classic RenderMode and the EnableRowHoverStyle property is set to True. It is indeed unexpected and since the Classic render modes is obsolete, the only solution would be to override the CSS rules.

I apologize for the miscommunication and I am sorry to have made an impression that I have not put enough effort in researching the problem - I assure you this is not the case.

You can use the CSS you've shared with us to work around the issue. I've adjusted the CSS code to make it work without the !important declaration. It is safer to work without that, as this may cause difficulties later when it comes to styling.

/* Hide the Background image of the hovered rows */
html body .RadGrid .rgHoveredRow {
    background-image: none;
}
/* Apply background color for the cells */
html body .RadGrid .rgHoveredRow > td {
    background-color: LightYellow;
    color: #5C5C5C;
}

Here some short videos showing the test results of three scenarios: 
As a Token of gratitude for reporting the issue, I have updated your Telerik points.

Kind regards,
Attila Antal
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Rodney Foley
Top achievements
Rank 1
Answers by
Rodney Foley
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or