[Solved] Colors on Groups

[Benny]

I'm trieng to get diffrent colors on diffrent groups.

.rsHorizontalHeaderTable th
    {
        color: Pink !important
    }

Set's the color for all.. :-(

<div class="rsInnerFix" style="overflow:hidden;">
                            <table class="rsHorizontalHeaderTable" cellpadding="0" cellspacing="0" border="0" style="height:25px;width:100%;">
                                <tr>
                                    <th>G 1</th><th>G 2</th><th>G 3</th>
                                </tr>
                            </table>
                        </div>

Is it possible to get "G 1" Red, "G 2" Blue and "G 3" Green.

I tried to change in the "OnResourceHeaderCreated" but without any luck.

The only way (not jet tested) that I have is to use jQuery to itterate over th in the table with class rsHorizontalHeaderTable...

[Benny]

It's working...

Add some css-classes

  <style type="text/css">
   .Red
    {
        color:Red  !important;
    }

    .Green
    {
        color: Green !important;
    }

    .Blue
    {
        color: Blue !important;
    }
</style>

Then some jquery...

var jQuery = window.jQuery = window.$ = $telerik.$;

          $(document).ready(function() {
          $(".rsHorizontalHeaderTable tr:last th:eq(0)").addClass("Red");
          $(".rsHorizontalHeaderTable tr:last th:eq(1)").addClass("Blue");
          $(".rsHorizontalHeaderTable tr:last th:eq(2)").addClass("Green");

            $(".rsHorizontalHeaderTable tr:last th:eq(3)").addClass("Red");
          $(".rsHorizontalHeaderTable tr:last th:eq(4)").addClass("Blue");
          $(".rsHorizontalHeaderTable tr:last th:eq(5)").addClass("Green");


            $(".rsHorizontalHeaderTable tr:last th:eq(6)").addClass("Red");
          $(".rsHorizontalHeaderTable tr:last th:eq(7)").addClass("Blue");
          $(".rsHorizontalHeaderTable tr:last th:eq(8)").addClass("Green");


            $(".rsHorizontalHeaderTable tr:last th:eq(9)").addClass("Red");
          $(".rsHorizontalHeaderTable tr:last th:eq(10)").addClass("Blue");
          $(".rsHorizontalHeaderTable tr:last th:eq(11)").addClass("Green");


            $(".rsHorizontalHeaderTable tr:last th:eq(12)").addClass("Red");
          $(".rsHorizontalHeaderTable tr:last th:eq(13)").addClass("Blue");
          $(".rsHorizontalHeaderTable tr:last th:eq(14)").addClass("Green");


            $(".rsHorizontalHeaderTable tr:last th:eq(15)").addClass("Red");
          $(".rsHorizontalHeaderTable tr:last th:eq(16)").addClass("Blue");
          $(".rsHorizontalHeaderTable tr:last th:eq(17)").addClass("Green");


            $(".rsHorizontalHeaderTable tr:last th:eq(18)").addClass("Red");
          $(".rsHorizontalHeaderTable tr:last th:eq(19)").addClass("Blue");
          $(".rsHorizontalHeaderTable tr:last th:eq(20)").addClass("Green");
         });

Next step will be to do all dynamically from code behind...

If anyone has a better way to solve this, please post it here!