Radgrid selected item style

[Ron]

Hi,

can you tell me  how to change radgrid selected item style? When I use the following css, it appears that there's a grey overlay and blow there's the red background i'm looking for. I attached a photo to give you an example.

.SelectedStyle
{
 background-color: red !important;
}

<telerik:RadGrid ID="grdClients" runat="server" Width="100%" AutoGenerateColumns="false"
       AllowMultiRowEdit="false" ShowHeader="false" DataSourceID="objClients"
           CssClass="RadGrid_Default" SelectedItemStyle-CssClass="SelectedStyle">

Thanks

[Jayesh Goyani]

Hello,

<style>
    .RadGrid .rgSelectedRow
    {
        background-image : none !important;
        background-color: red !important;
    }
</style>

let me know if any concern.

Thanks,
Jayesh Goyani

[Ron]

Thanks a lot, that worked. Can you tell me how to apply a hover style to rad grid. Apparently what I'm doing is not working.

.RadGrid .rgHoveredRow
            {
                background-color:blue;
            }

[Jayesh Goyani]

Hello,

If you want to overwrite existing css then add "!important;" after every css property.

Thanks,
Jayesh Goyani

[Ron]

I tried that but still did not work, I wonder if im using the correct style.

[Princy]

Hello Ron,

To enable the hover style for the grid rows, set the ClientSettings  EnableRowHoverStyle property of RadGrid to True. For further information check the following help documentation.
Set style on mouse over

Thanks,
Princy.

[Prabhu]

Hi,
    As Jayesh Goyani suggested I've used the CSS for hightlighting my RadGrid. it works fine but I am able to see Green border for the seleted item eventhough ive mentioned the Border Style in my CSS. Please let me know where the Problem is. Ive attached the CSS and the image for your references.

.RadGrid .rgSelectedRow
{
    background-image : none !important;
    background-color: #cee2ff !important;
    height: 19px !important;
    border:solid 1px #0e4b7d !important;
}

For better viewable, ive zoom in my page to 200%.

[Shinu]

Hello,

Try the following CSS.
CSS:

.RadGrid_Default .rgSelectedRow td
{
    border-bottom-color:transparent !important;
}

-Shinu.

[Vishu]

Can I disable mouse hovering on grid first row and let it be enable for other rows? I am displaying first row as footer total and do not wan't to let user to hover over it. See screen shot.

[Shinu]

Hi Vishu,

Please try to attach the client side OnRowMouseOver event of the RadGrid and cancel the event only for the first row of the RadGrid.

ASPX:

...
<ClientSettings>

    <ClientEvents OnRowMouseOver="RowMouseOver" />

</ClientSettings>
...

JavaScript:

function RowMouseOver(sender, args) {
    if (args._itemIndexHierarchical == 0) {
        args._domEvent.preventDefault();
    }
}

Thanks,
Shinu.

[Vishu]

Thanks Shinu. 
This did not fix the issue. Still mouse hover change the half of the row color.Please see attached screenshot.
It seems when the text is wrapped to down then issue arises. Somehow mouse hover event not identifying the first row.

In code behind Implementation, first row has been created with an empty object of list and bind to radgrid. Other columns are being hidden on _prerender event.

[Shinu]

Hi Vishu,

Another approach is that on mouse over of first row in RadGrid you can change the background color as follows. From the attached screenshots I have noticed that footer is showing at the top of the RadGrid , such a behavior is not expected. Please share your code if it doesn't help.

JavaScript:

function RowMouseOver(sender, args) {
    if (args._itemIndexHierarchical == 0) {
        sender.get_masterTableView().get_dataItems()[0]._element.bgColor = "White";
    }
}

​Thanks,
Shinu.