Radgrid alt row

[Ron]

Hi,

I'm trying to customize a rad grid and everything is going fine expected that I can't apply styles to alternate row for hover or selected.
I'm using a hover row style and a selected row style and they both work until you hover over the alt row or try to selected the alt row,
nothing happens. I attached a sample image to give you an example.

.rgRow,.rgRow td
      {
          height:25px;
      }
      .rgAltRow,.rgAltRow td
      {
          height:25px !important ;
          background-color: #F0F6FD;
          border:none!important;
          background-image : none!important;
      }
      .rgSelectedRow,.rgSelectedRowtd
      {
          background-color: yellow !important;
          background-image : none!important;
          color:Black !important;
      }
      .rgHoveredRow
      {
          background-color: red !important;
           background-image : none!important;
      }

Thanks,

[Shinu]

Hello Ron,

I also faced the same issue and changed the CSS like below. Please give a try with this.
CSS:

.rgRow, .rgRow td
        {
            height: 25px;
        }
.rgAltRow, .rgAltRow
        {
            height: 25px !important;
            background: #F0F6FD;
            border: none !important;
            background-image: none !important;
        }
 .rgSelectedRow, .rgSelectedRowtd
        {
            background-color: yellow !important;
            background-image: none !important;
            color: Black !important;
        }
 .rgHoveredRow
        {
            background: red !important;
            background-image: none !important;
        }

Thanks,
Shinu.

[Ron]

I don't see what you've changed, the script you posted is identical to the script I've posted.

[Shinu]

Hello,

I have removed the td element and that did the trick.

Thanks,
Shinu.

[Ron]

You are right, that did the trick. Thank you very much, however I am still experience another minor problem. If you look at the image attached you will noticed that the selected row has what seems to be a gray bottom border that I did not specify and do not want. I tried border:none !important but that did not work either. Also you can see when selected the first column text color turns white which I did not specify. I tried color:black !important within the selected style but again nothing.

.rgSelectedRow,.rgSelectedRowtd
          {
              background-color: yellow !important;
              background-image : none!important;
              border:none!important;
              color:Black !important;
          }

Thanks,
Ron.

[Princy]

Hello Ron,

Try the following CSS to achieve your scenario.
CSS:

.rgRow, .rgRow td
 {
  height: 25px;
 }
 .rgAltRow, .rgAltRow
{
  height: 25px !important;
  background: #F0F6FD;
  border: none !important;
  background-image: none !important;
}
.rgSelectedRow, .rgSelectedRow td, .rgSelectedRow a
 {
  background-color: yellow !important;
  background-image: none !important;
  color: Black !important;
  border-bottom-color:yellow !important;
 }
 .rgHoveredRow
 {
  background: red !important;
  background-image: none !important;
 }

Thanks,
Princy.

[Ron]

Once again, that worked. But I'm still getting that unwanted gray border at the bottom.

[Princy]

Hello Ron,

The previous CSS worked on my end.Take a look at the attached image as well. An another method you can do is try adding the following  CSS.
CSS:

<style type="text/css">
 . . . . .

.rgSelectedRow td

 {

  border-bottom-color:Yellow !important;

 }

</style>

Thanks,
Princy.