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

[Solved] Selection Highlight Problem with Tall Rows

6 Answers 169 Views

Grid

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

6 Answers, 1 is accepted

answered on 30 Jun 2009, 04:39 AM

Hi Chris,

I got the same problem when I set the BackColor for the alternating rows using AlternatingItemStyle. I solved this by including the below given CSS in the head section of my page.

CSS:

    
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <style type="text/css" > 
        
                .RadGrid_Office2007 .rgSelectedRow 
        
                { 
        
                   background:#ffcb60 0 -3900px repeat-x url('Grid/sprite.gif') !important; 
        
                } 
        
                </style> 
        
            </head>

Thanks
Shinu.

answered on 30 Jun 2009, 12:30 PM

Shinu,

Thanks for the reply!

For the record, yes, I am using AlternatingItemStyle to set the background colors, and it is indeed only the .rgAltRow rows that are displaying the problem.

I tried the CSS you provided and got this. As you can see, the .rgRow rows are working fine(as they always were), and now the .rgAltRow rows are completely missing their highlight. I'm assuming that this is because I'm using the built-in skin, and it can't find Grid/sprite.gif. I'm unsure how to point that at the resource instead of the file, or, failing that, where to put the sprite file into my website (which to make matters worse, uses themes as well).

And, 10 minutes and one quick trip into the guts of the DOM later, I have this:

    
              <style type="text/css">   
        
                .RadGrid_Office2007 .rgSelectedRow   
        
                {   
        
                   background:#ffcb60 0 -3900px repeat-x url(WebResource.axd?d=UCVyA0Ta1mrC4u9Hr9oSySGHwe_DqOOVhwp-0pZKiivCHqADHijRyYJDSEGDBioLihOO23yt6sNTH_3tBnQQM3a9ay6pqANcHn-EWKc4zwOUow98mfCGTbyazkhSPvXy0&t=633810214573195128) !important;   
        
                }   
        
                </style>

Now I'm back to the original.

I thought it was the repeat-x that was doing it, by not allowing the image to repeat vertically, but the .rgRow rows seem to work fine with the repeat-x in them, and changing it to just repeat makes no difference.

Anyone else? I'm running out of ideas here. The only difference between the <tr> nodes in the DOM is the background-color on the alt rows. I figured the !important would take care of that.

Thanks again, Shinu, but my quest continues!

-Chris

answered on 30 Jun 2009, 03:01 PM

I've had the same issue in the past. Going back to your first example of code - my suggestion is that you break the "background" specification into separate segments, and use the !important descriptor after each. Example:

.RadGrid_Office2007 .rgSelectedRow
{
    background-color: #ffcb60 !important;
    background-repeat: repeat !important;
    background-image: url('Grid/sprite.gif') !important;
    background-position-x: 0 !important;
    background-position-y: -3900px !important;
}

This makes it much harder for any other styles to override the things you specify because of the order in which their styles get applied, or the level of specificity of the CSS selectors used. !important is a pretty good override. :) Unfortunately - it is touchy when you try to use a multi-part declaration. Breaking it up allows you to specify to the browser that each individual attribute is individually important.

answered on 17 Feb 2010, 09:46 AM

Hi Craig,

As explained in the following forum thread, the problem is caused by the fact that setting inline styles in the RadGrid declaration overrides the control skin.

http://www.telerik.com/community/forums/community-forums/design/conditional-formatting-skews-all-the-skin-format-once-applied-to-a-row-in-radgrid.aspx#601248

So one option is to define the row styles with custom CSS classes, as described above, or just reenforce the original skin selected background color with:

.RadGrid_SkinName .rgSelectedRow
{
background-color: color !important ;
}

Best wishes,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 19 Feb 2010, 11:07 AM

Thanks Dimo.

Just to clarify, I had used Shinu's suggestion above which solved the missing selected row background colour, but removed the vignetted highlight gif (sprite.gif) - exactly as Chris experienced it. However, replacing:

background

:#ffcb60 0 -3900px repeat-x url('Grid/sprite.gif') !important;

from Shinu's code with:

background-color

: #ffcb60 !important;

from your suggestion has brought back the gif.

Problem solved!

Many thanks.