RadGrid set row border on HoverRow

3 posts, 0 answers
  1. John
    John avatar
    9 posts
    Member since:
    May 2019

    Posted 06 Jun Link to this post

    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. John
    John avatar
    9 posts
    Member since:
    May 2019

    Posted 06 Jun Link to this post

    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;

    }

  3. Attila Antal
    Admin
    Attila Antal avatar
    428 posts

    Posted 07 Jun Link to this post

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