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

RadGrid set row border on HoverRow

2 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 06 Jun 2019, 12:50 PM

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>

2 Answers, 1 is accepted

Sort by
0
John
Top achievements
Rank 1
answered on 06 Jun 2019, 04:03 PM

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;

}

0
Attila Antal
Telerik team
answered on 07 Jun 2019, 10:18 AM
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
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
John
Top achievements
Rank 1
Answers by
John
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or