RadGrid set row border on HoverRow

[John]

How can I set the border style of the row on HoverRow?

I can set the back color no problem.

But, any change to the border does not seem to have any effect.

 

In<ClientSettings> of grid I set EnableRowHoverStyle="true" 

 

Then is style section I have css:

<style type="text/css">
         div.RadGrid .rgHoveredRow
         {
           background-color:#ff0000 !important;  /* this works */
           border-width:thick !important;    /* no effect */
           border-right-color:black !important;/* no effect */
         }    
    </style>

[John]

It appears you must first have set the gridlines and borders in the <MasterTableView> section:

 <MasterTableView GridLines="Both" BorderStyle="Solid" BorderWidth="1px">

Once this is done, you will then see any change to the border width and color you set within a style

 div.RadGrid .rgHoveredRow td

{

border-width:2px!important;
 border-color:black!important;

}

[Attila Antal]

Hi John,

The GridLines property was inherited from the ASP DataGrid and is not recommended to be used with the Telerik RadGrid. You can choose a skin that has a border or apply border using CSS styles:

Assuming the GridLines are set to None:

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None">
</telerik:RadGrid>

Since most of the Skins in RadGrid apply styling (including border) on the Cells, manipulating the row border would not make any difference as the Cell's style covers it. To apply border and even background color, try styling the cell of the hovered row:

html body .RadGrid .rgHoveredRow.rgRow > td,
html body .RadGrid .rgHoveredRow.rgAltRow > td,
html body .RadGrid .rgHoveredRow.rgEditRow > td {
    background-color: #ff0000;
    border-bottom-color: black;
}

Result:




Kind regards,
Attila Antal
Progress Telerik