Row Hover When Row Wraps Only Colors First Line of Text

10 posts, 0 answers
  1. Rodney Foley
    Rodney Foley avatar
    72 posts
    Member since:
    Oct 2009

    Posted 11 Dec 2018 Link to this post

    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.

     

  2. Rodney Foley
    Rodney Foley avatar
    72 posts
    Member since:
    Oct 2009

    Posted 11 Dec 2018 in reply to Rodney Foley Link to this post

    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.

     

     

     

  3. Rodney Foley
    Rodney Foley avatar
    72 posts
    Member since:
    Oct 2009

    Posted 11 Dec 2018 in reply to Rodney Foley Link to this post

    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.

  4. Attila Antal
    Admin
    Attila Antal avatar
    246 posts

    Posted 14 Dec 2018 Link to this post

    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.
  5. Rodney Foley
    Rodney Foley avatar
    72 posts
    Member since:
    Oct 2009

    Posted 14 Dec 2018 in reply to Attila Antal Link to this post

    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.

  6. Attila Antal
    Admin
    Attila Antal avatar
    246 posts

    Posted 19 Dec 2018 Link to this post

    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.
  7. Rodney Foley
    Rodney Foley avatar
    72 posts
    Member since:
    Oct 2009

    Posted 20 Dec 2018 in reply to Attila Antal Link to this post

    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.

  8. Attila Antal
    Admin
    Attila Antal avatar
    246 posts

    Posted 27 Dec 2018 Link to this post

    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.
  9. Rodney Foley
    Rodney Foley avatar
    72 posts
    Member since:
    Oct 2009

    Posted 29 Dec 2018 in reply to Attila Antal Link to this post

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

     

  10. Attila Antal
    Admin
    Attila Antal avatar
    246 posts

    Posted 02 Jan Link to this post

    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.
Back to Top