WebResources.axd & CSS Problem

[Ryan]

Hello,

I am having a problem where webresources seems to override CSS classes that I set in code. What's strange is that the styling is working for an alternating item, but not a regular one. When I'm debugging I can see that the class is being set through code, and on the web page itself the item's CSS class reflects this change, but for a non-alternating item it doesn't work. What I am setting in CSS is the borders to none and a background color determined in code.

There is no explanation that I can find as to why this is happening; it seems rather random. I was developing and everything was working fine, and all of a sudden this started to happen without any changes to my controls library.

This also occurred a few weeks ago with a nested table header. CSS was set for the header, but webresources brute forced a background image into the CSS. I was able to fix this problem through code and style, but am unable to for the problem I'm posting about.

On a final note, the !Important style declaration doesn't have any impact.

Thanks for any help!
Ryan

Controls v2011.2.712.35

C# code:

if (item.ItemType == Telerik.Web.UI.GridItemType.AlternatingItem)
 {
    if (item.BackColor == Color.FromArgb(Int32.Parse("C7EAC7", System.Globalization.NumberStyles.HexNumber)))//GREEN
   {
    item.ChildItem.NestedTableViews[0].CssClass = "altDrawInfo build";
    item.ChildItem.NestedTableViews[0].Style["background-color"] = "C7EAC7";
    }
    else if (item.BackColor == Color.FromArgb(Int32.Parse("FCB9B8", System.Globalization.NumberStyles.HexNumber)))//RED
    {
    item.ChildItem.NestedTableViews[0].CssClass = "altDrawInfo asBuilt";
    item.ChildItem.NestedTableViews[0].Style["background-color"] = "FCB9B8";
    }
    else if (item.BackColor == Color.FromArgb(Int32.Parse("FFFFCC", System.Globalization.NumberStyles.HexNumber)))//ORANGE
    {
    item.ChildItem.NestedTableViews[0].CssClass = "altDrawInfo approval";
    item.ChildItem.NestedTableViews[0].Style["background-color"] = "FFFFCC";
    }
    else//DEFAULT
    {
    item.ChildItem.NestedTableViews[0].CssClass = "altDrawInfo";
    item.ChildItem.NestedTableViews[0].Style["background-color"] = "EEEEEE";
    }
}
else
{
    if (item.BackColor == Color.FromArgb(Int32.Parse("C7EAC7", System.Globalization.NumberStyles.HexNumber)))//GREEN
    {
    item.ChildItem.NestedTableViews[0].CssClass = "DrawInfo build";
    item.ChildItem.NestedTableViews[0].Style["background-color"] = "C7EAC7";
    }
    else if (item.BackColor == Color.FromArgb(Int32.Parse("FCB9B8", System.Globalization.NumberStyles.HexNumber)))//RED
    {
    item.ChildItem.NestedTableViews[0].CssClass = "DrawInfo asBuilt";
    item.ChildItem.NestedTableViews[0].Style["background-color"] = "FCB9B8";
    }
    else if (item.BackColor == Color.FromArgb(Int32.Parse("FFFFCC", System.Globalization.NumberStyles.HexNumber)))//ORANGE
     {
    item.ChildItem.NestedTableViews[0].CssClass = "DrawInfo approval";
    item.ChildItem.NestedTableViews[0].Style["background-color"] = "FFFFCC";
    }
    else//DEFAULT
    {
    item.ChildItem.NestedTableViews[0].CssClass = "DrawInfo";
    item.ChildItem.NestedTableViews[0].Style["background-color"] = "D8D8D8";
    }
}

Style code:

/* NON-ALTERNATING ROW */

.drawInfo /*  */
{
    background-color:#D8D8D8 !important;
    border-style:solid !important;
    border-color:#000000 !important;
    border-width:0 2px 0 0 !important; /*top right bottom left*/
}

.drawInfo td /*  */
{
    background-color:#D8D8D8;
    border-style:solid !important;
    border-color:#EDDA74 !important;
    border-width:0 0 0 0 !important; /*top right bottom left*/
}

.drawInfo.build /* GREEN */
{
    background-color:#C7EAC7 !important;
    border-style:solid !important;
    border-color:#000000 !important;
    border-width:0 2px 0 0 !important; /*top right bottom left*/
}

.drawInfo.build td /* GREEN */
{
    background-color:#C7EAC7 !important;
    border-style:solid !important;
    border-color:#EDDA74 !important;
    border-width:0 0 0 0 !important; /*top right bottom left*/
}

.drawInfo.asBuilt /* RED */
{
    background-color:#FCB9B8 !important;
    border-style:solid !important;
    border-color:#000000 !important;
    border-width:0 2px 0 0 !important; /*top right bottom left*/
}

.drawInfo.asBuilt td /* RED */
{
    background-color:#FCB9B8 !important;
    border-style:solid !important;
    border-color:#EDDA74 !important;
    border-width:0 0 0 0 !important; /*top right bottom left*/
}

.drawInfo.approval /* ORANGE */
{
    background-color:#FFFFCC !important;
    border-style:solid !important;
    border-color:#000000 !important;
    border-width:0 2px 0 0 !important; /*top right bottom left*/
}

.drawInfo.approval td /* ORANGE */
{
    background-color:#FFFFCC !important;
    border-style:solid !important;
    border-color:#EDDA74 !important;
    border-width:0 0 0 0 !important; /*top right bottom left*/
}

/* ALTERNATING ROW */

.altDrawInfo /*  */
{
    background-color:#EEEEEE !important;
    border-style:solid !important;
    border-color:#F7F7F7 !important;
    border-width:0 2px 0 0 !important; /*top right bottom left*/
}

.altDrawInfo td /*  */
{
    background-color:#EEEEEE !important;
    border-style:solid !important;
    border-color:#EDDA74 !important;
    border-width:0 0 0 0 !important; /*top right bottom left*/
}

.altDrawInfo.build /* GREEN */
{
    background-color:#C7EAC7 !important;
    border-style:solid !important;
    border-color:#F7F7F7 !important;
    border-width:0 2px 0 0 !important; /*top right bottom left*/
}

.altDrawInfo.build td /* GREEN */
{
    background-color:#C7EAC7 !important;
    border-style:solid !important;
    border-color:#EDDA74 !important;
    border-width:0 0 0 0 !important; /*top right bottom left*/
}

.altDrawInfo.asBuilt /* RED */
{
    background-color:#FCB9B8 !important;
    border-style:solid !important;
    border-color:#F7F7F7 !important;
    border-width:0 2px 0 0 !important; /*top right bottom left*/
}

.altDrawInfo.asBuilt td /* RED */
{
    background-color:#FCB9B8 !important;
    border-style:solid !important;
    border-color:#EDDA74 !important;
    border-width:0 0 0 0 !important; /*top right bottom left*/
}

.altDrawInfo.approval /* ORANGE */
{
    background-color:#FFFFCC !important;
    border-style:solid !important;
    border-color:#F7F7F7 !important;
    border-width:0 2px 0 0 !important; /*top right bottom left*/
}

.altDrawInfo.approval td /* ORANGE */
{
    background-color:#FFFFCC !important;
    border-style:solid !important;
    border-color:#EDDA74 !important;
    border-width:0 0 0 0 !important; /*top right bottom left*/
}

[Ryan]

I should also note that the C# code is being executed in the grid's prerender event, and item refers to the current GridDataItem within a foreach loop. As well, this code is within "if (item.Expanded)", as I am manipulating a nested table view.

[Galin]

Hi Ryan,

I would suggest you to avoid setting the background and other styles with markup attributes when it is possible to do it with CSS. This approach is obsolete and will have negative effect on the performance.

You can change the background for the Office2007 Skin with this CSS:

div.RadGrid_Office2007 .rgRow { /* change the background colour of rows */
    background: white;
    color: red;
}

div.RadGrid_Office2007 .rgAltRow { /* change the  background colour for Alternated  rows */
    background: #ccc;
    color: green;
}

For other Skins, replace _Office2007 with their _Name, read here more examples.

I hope this helps.

All the best,
Galin
the Telerik team

[Ryan]

Hello,

As it turns out this was a capitalization problem when setting the non-alternating row's CSS(DrawInfo instead of drawInfo), which I'm embarrassed to admit to. Everything is working now with the code I posted. If I run into other problems relating to this I will take your advice into consideration.

Thanks for your time!

Ryan