Dynamically changing color of a row not working

[Rhonda]

Hi all,

I have a grid that on the ItemDataBound event I am checking some dates and turning the rows either yellow or red if the those corresponding dates are past the current date.  The test data I am using should make it so every row is red, however, only my alternating rows are turning red.  When I step through the code I can see that the code is being executed for every row so sometime between the time the code executes and the grid finishes loading the row color for some of the rows is being set back to white.

if ((e.Item.ItemType == GridItemType.Item) || (e.Item.ItemType == GridItemType.AlternatingItem))
{
    GridDataItem dataBoundItem = e.Item as GridDataItem;

    DateTime currentDate = DateTime.Now;
    DateTime dtRed = Convert.ToDateTime(DateToRed);
    DateTime dtYellow = Convert.ToDateTime(DateToYellow);

    //test data this should turn all rows red.//
    dtYellow = Convert.ToDateTime("08/25/2011");
    dtRed = Convert.ToDateTime("9/01/2011");

    System.TimeSpan diffRed = currentDate.Subtract(dtRed);
    System.TimeSpan diffYellow = currentDate.Subtract(dtYellow);

    if (diffYellow.Days >= 1)
    {
        dataBoundItem.BackColor = System.Drawing.Color.Yellow;
    }

    if (diffRed.Days >= 1)
    {
        dataBoundItem.BackColor = System.Drawing.Color.Red;
    }
}

<telerik:RadGrid ID="MyGrid" runat="server" Skin="WF" EnableLinqExpressions="false" EnableEmbeddedSkins="false" AllowSorting="true" OnSortCommand="MyGrid_SortCommand" OnItemDataBound="MyGrid_ItemDataBound" OnItemCommand="MyGrid_ItemCommand" OnItemCreated="MyGrid_ItemCreated" AllowFilteringByColumn="True">
            <MasterTableView Width="100%" CommandItemDisplay="Bottom" AutoGenerateColumns="false" EnableViewState="false" TableLayout="Fixed">
                <Columns>
                    <telerik:GridBoundColumn DataField="Application.Name" HeaderText="Application " UniqueName="Name" FilterListOptions="VaryByDataTypeAllowCustom" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="LOB" HeaderText="LOB" UniqueName="LOB"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Status" HeaderText=" Status" UniqueName="Status" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="dateToYellow" HeaderText="Date to Yellow" UniqueName="dateToYellow" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="dateToRed" HeaderText="Date to Red" UniqueName="dateToRed" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="FirstConfirmedInstallDate" HeaderText="Install Date" UniqueName="installDate" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Manager.Name" HeaderText="Application Manager" UniqueName="Manager"></telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <HeaderStyle BackColor="#666666" Font-Names="verdana, arial" Font-Size="Small" Height="20px" />
            <FilterItemStyle BackColor="#ffffff" />
        </telerik:RadGrid>

It is definately related to a conflict with the skin I am using because if I remove the skin, the color change code works fine. 

.RadGrid_WF
{
    border:1px solid #CCCCCC;
    background:#4f4f4f;
    color:#777777;
}

.RadGrid_WF,
.RadGrid_WF .rgMasterTable,
.RadGrid_WF .rgDetailTable,
.RadGrid_WF .rgGroupPanel table,
.RadGrid_WF .rgCommandRow table,
.RadGrid_WF .rgEditForm table,
.RadGrid_WF .rgPager table,
.GridToolTip_WF
{
    font:12px/16px "segoe ui",arial,sans-serif;
}

.RadGrid_WF .rgAdd,
.RadGrid_WF .rgRefresh,
.RadGrid_WF .rgEdit,
.RadGrid_WF .rgDel,
.RadGrid_WF .rgFilter,
.RadGrid_WF .rgPagePrev,
.RadGrid_WF .rgPageNext,
.RadGrid_WF .rgPageFirst,
.RadGrid_WF .rgPageLast,
.RadGrid_WF .rgExpand,
.RadGrid_WF .rgCollapse,
.RadGrid_WF .rgSortAsc,
.RadGrid_WF .rgSortDesc,
.RadGrid_WF .rgUpdate,
.RadGrid_WF .rgCancel,
.RadGrid_WF .rgUngroup,
.RadGrid_WF .rgExpXLS,
.RadGrid_WF .rgExpDOC,
.RadGrid_WF .rgExpPDF,
.RadGrid_WF .rgExpCSV
{
    background-image:url('Grid/sprite.gif');
}

/*header*/

.RadGrid_WF .rgHeaderDiv
{
    background:#474747 0 -9550px repeat-x url('Grid/sprite.gif');
}
.rgTwoLines .rgHeaderDiv
{
    background-position:0 -9050px;
}

.RadGrid_WF .rgHeader,
.RadGrid_WF th.rgResizeCol
{
    border:0;
    border-bottom:1px solid #CCCCCC;
    border:1px solid #CCCCCC;
    background:#191919 0 -2300px repeat-x url('Grid/sprite.gif');
}

.RadGrid_WF th.rgSorted
{
    background-color:#020202;
    background-position:0 -2600px;
}

.RadGrid_WF .rgHeader,
.RadGrid_WF .rgHeader a
{
    color:#fff;
}

/*rows*/

.RadGrid_WF .rgRow td,
.RadGrid_WF .rgAltRow td,
.RadGrid_WF .rgEditRow td,
.RadGrid_WF .rgFooter td
{
    border-style:solid;
    border-width:0 0 0 0;
}

.RadGrid_WF .rgRow td
{
    border-color:#CCCCCC;
    background-color:White;
    border-width:1px 1px 1px 1px;
}

.RadGrid_WF .rgAltRow
{
    border-color:#CCCCCC;
    background:white;
}

.RadGrid_WF .rgAltRow td
{
    border-color:#CCCCCC;
    border-width:1px 1px 1px 1px;
}

.RadGrid_WF .rgRow .rgSorted
{
    border-bottom-color:#4b4b4b;
    background-color:#4b4b4b;
}

.RadGrid_WF .rgAltRow .rgSorted
{
    border-bottom-color:#454545;
    background-color:#454545;
}

.RadGrid_WF .rgSelectedRow .rgSorted,
.RadGrid_WF .rgActiveRow .rgSorted,
.RadGrid_WF .rgHoveredRow .rgSorted,
.RadGrid_WF .rgEditRow .rgSorted
{
    background-color:transparent;
}

.RadGrid_WF .rgRow a,
.RadGrid_WF .rgAltRow a,
.RadGrid_WF .rgEditRow a,
.RadGrid_WF .rgFooter a,
.RadGrid_WF .rgEditForm a
{
    color:maroon;
}

.RadGrid_WF .rgSelectedRow
{
    background:#303030 0 -3900px repeat-x url('Grid/sprite.gif');
    color:#fff;
}
*+html .RadGrid_WF .rgSelectedRow .rgSorted{background-color:#303030}
* html .RadGrid_WF .rgSelectedRow .rgSorted{background-color:#303030}

.RadGrid_WF .rgActiveRow,
.RadGrid_WF .rgHoveredRow
{
    background:#2e2e2e 0 -2900px repeat-x url('Grid/sprite.gif');
    color:#9eda29;
}
*+html .RadGrid_WF .rgActiveRow .rgSorted,
*+html .RadGrid_WF .rgHoveredRow .rgSorted{background-color:#2e2e2e}
* html .RadGrid_WF .rgActiveRow .rgSorted,
* html .RadGrid_WF .rgHoveredRow .rgSorted{background-color:#2e2e2e}

.RadGrid_WF .rgEditRow
{
    background:#202020;
    color:#d7d7d7;
}
*+html .RadGrid_WF .rgEditRow .rgSorted{background-color:#202020}
* html .RadGrid_WF .rgEditRow .rgSorted{background-color:#202020}

.RadGrid_WF .rgActiveRow td,
.RadGrid_WF .rgActiveRow td.rgSorted,
.RadGrid_WF .rgHoveredRow td,
.RadGrid_WF .rgHoveredRow td.rgSorted
{
    border-bottom-color:#1e1e1e;
}

.RadGrid_WF .rgSelectedRow td,
.RadGrid_WF .rgSelectedRow td.rgSorted
{
    border-bottom-color:#1a1a1a;
}

.RadGrid_WF .rgEditRow td,
.RadGrid_WF .rgEditRow td.rgSorted
{
    border-bottom-color:#080808;
}

/*footer*/

.RadGrid_WF .rgFooterDiv,
.RadGrid_WF .rgFooter
{
    background:#2e2e2e;
}

.RadGrid_WF .rgFooter td
{
    border:0;
    border-top:1px solid #080808;
}

/*status*/

.RadGrid_WF .rgPager .rgStatus
{
    border:solid #080808;
    border-width:1px 1px 0 0;
}

.RadGrid_WF .rgStatus div
{
    background-image:url('Common/loading_small.gif');
}

/*pager*/

.RadGrid_WF .rgPager
{
    background:#1e1e1e 0 -8000px repeat-x url('Grid/sprite.gif');
}

.RadGrid_WF td.rgPagerCell
{
    border-top:1px solid #080808;
    border-left:1px solid #3a3a3a;
}

.RadGrid_WF .rgInfoPart
{
    color:#a9a9a9;
}

.RadGrid_WF .rgInfoPart strong
{
    color:#fefefe;
}

.RadGrid_WF .rgPageFirst
{
    background-position:0 -550px;
}
.RadGrid_WF .rgPageFirst:hover
{
    background-position:0 -600px;
}
.RadGrid_WF .rgPagePrev
{
    background-position:0 -700px;
}
.RadGrid_WF .rgPagePrev:hover
{
    background-position:0 -750px;
}
.RadGrid_WF .rgPageNext
{
    background-position:0 -850px;
}
.RadGrid_WF .rgPageNext:hover
{
    background-position:0 -900px;
}
.RadGrid_WF .rgPageLast
{
    background-position:0 -1000px;
}
.RadGrid_WF .rgPageLast:hover
{
    background-position:0 -1050px;
}

.RadGrid_WF .rgPager .rgPagerButton
{
    border-color:#080808;
    background:#1b1b1b repeat-x 0 -1550px url('Grid/sprite.gif');
    color:#fff;
    font-family:"Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

.RadGrid_WF .rgNumPart a:hover,
.RadGrid_WF .rgNumPart a:hover span,
.RadGrid_WF .rgNumPart a.rgCurrentPage,
.RadGrid_WF .rgNumPart a.rgCurrentPage span
{
    background:no-repeat url('Grid/sprite.gif');
}

.RadGrid_WF .rgNumPart a
{
    color:#a9a9a9;
}

.RadGrid_WF .rgNumPart a:hover
{
    background-position:100% -1250px;
    color:#9eda29;
}

.RadGrid_WF .rgNumPart a:hover span
{
    background-position:0 -1150px;
}

.RadGrid_WF .rgNumPart a.rgCurrentPage,
.RadGrid_WF .rgNumPart a.rgCurrentPage:hover
{
    background-position:100% -1450px;
    color:#fff;
}

.RadGrid_WF .rgNumPart a.rgCurrentPage span,
.RadGrid_WF .rgNumPart a.rgCurrentPage:hover span
{
    background-position:0 -1350px;
}

/*sorting, reordering*/

.RadGrid_WF .rgHeader .rgSortAsc
{
    background-position:3px -248px;
    height:10px;
}

.RadGrid_WF .rgHeader .rgSortDesc
{
    background-position:3px -198px;
    height:10px;
}

.GridReorderTop_WF,
.GridReorderBottom_WF
{
    background:0 0 no-repeat url('Grid/sprite.gif');
}

.GridReorderBottom_WF
{
    background-position:0 -50px;
}

/*filtering*/

.RadGrid_WF .rgFilterRow
{
    background:#ffffff 0 -7000px;
}

.RadGrid_WF .rgFilterRow td
{
    border-top:1px solid #ffffff;
    border-bottom:1px solid #080808;
}

.RadGrid_WF .rgFilter
{
    background-position:0 -300px;
}

.RadGrid_WF .rgFilter:hover
{
    background-position:0 -350px;
}

.RadGrid_WF .rgFilterActive,
.RadGrid_WF .rgFilterActive:hover
{
    background-position:0 -400px;
}

.RadGrid_WF .rgFilterBox
{
    border-color:#080808;
    background:#ffffff;
    font-family:"Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    color:#ffffff;
}

/*filter context menu*/

.RadMenu_WF .rgHCMClear,
.RadMenu_WF .rgHCMFilter
{
    border-color:#080808;
    background:#ffffff center -23px repeat-x url('FormDecorator/ButtonSprites.gif');
    color:#000;
    font-family:"Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

.RadMenu_WF .rgHCMClear:hover,
.RadMenu_WF .rgHCMFilter:hover
{
    background-position:center -67px;
    background-color:#020202;
    color:#9eda29;
}

/*grouping*/

.RadGrid_WF .rgGroupPanel
{
    border:0;
    border-bottom:1px solid #080808;
    background:#202020 0 -1900px repeat-x url('Grid/sprite.gif');
}

.RadGrid_WF .rgGroupPanel td
{
    border:0;
    padding:3px 4px;
}

.RadGrid_WF .rgGroupPanel td td
{
    padding:0;
}

.RadGrid_WF .rgGroupPanel .rgSortAsc
{
    background-position:2px -146px;
}

.RadGrid_WF .rgGroupPanel .rgSortDesc
{
    background-position:2px -95px;
}

.RadGrid_WF .rgUngroup
{
    background-position:0 -9000px;
}

.RadGrid_WF .rgGroupItem
{
    border:1px solid #080808;
    background:#1b1b1b 0 -6500px repeat-x url('Grid/sprite.gif');
    color:#fff;
}

.RadGrid_WF .rgMasterTable td.rgGroupCol,
.RadGrid_WF .rgMasterTable td.rgExpandCol
{
    border-color:#202020;
    background:#202020 none;
}

.RadGrid_WF .rgGroupHeader
{
    font-size:1.1em;
    line-height:21px;
    color:#fff;
}

.RadGrid_WF .rgGroupHeader,
.RadGrid_WF .rgGroupHeader td.rgGroupCol
{
    background:#202020 0 -8500px repeat-x url('Grid/sprite.gif');
}

.RadGrid_WF .rgGroupHeader td
{
    border-top:1px solid #3a3a3a;
    padding-top:0;
    padding-bottom:0;
}

.RadGrid_WF .rgGroupHeader td.rgGroupCol
{
    border-top-color:#202020;
}

.RadGrid_WF .rgExpand
{
    background-position:5px -496px;
}

.RadGrid_WF .rgCollapse
{
    background-position:3px -444px;
}

/*editing*/

.RadGrid_WF .rgEditForm
{
    border-bottom:1px solid #080808;
}

.RadGrid_WF .rgUpdate
{
    background-position:0 -1800px;
}

.RadGrid_WF .rgCancel
{
    background-position:0 -1850px;
}

/*hierarchy*/

.RadGrid_WF .rgDetailTable
{
    border-color:#080808;
}

/*command row*/

.RadGrid_WF .rgCommandRow
{
    background:#ffffff 0 -2100px repeat-x url('Grid/sprite.gif');
    color:#000000;
    height:40px;
    border-color:#ffffff;
}

.RadGrid_WF .rgCommandCell
{
    border:0;
    padding:2px 7px;
}

.RadGrid_WF tfoot .rgCommandCell
{
    border-top:1px solid #0e0e0e;
}

.RadGrid_WF thead .rgCommandCell
{
    border-bottom:1px solid #0e0e0e;
}

.RadGrid_WF .rgCommandTable,
.RadGrid_WF .rgCommandTable td
{
    border:0;
    padding:0;
}

.RadGrid_WF .rgCommandRow a
{
    color:#000;
    text-decoration:none;
}

.RadGrid_WF .rgAdd
{
    margin-right:3px;
    background-position:0 -1650px;
}

.RadGrid_WF .rgRefresh
{
    margin-right:3px;
    background-position:0 -1600px;
}

.RadGrid_WF .rgEdit
{
    background-position:0 -1700px;
}

.RadGrid_WF .rgDel
{
    background-position:0 -1750px;
}

.RadGrid_WF .rgExpXLS,
.RadGrid_WF .rgExpDOC,
.RadGrid_WF .rgExpPDF,
.RadGrid_WF .rgExpCSV
{
    background-image:url('../Common/Grid/export.gif');
}

.RadGrid_WF .rgExpXLS
{
    background-position:0 0;
}
.RadGrid_WF .rgExpDOC
{
    background-position:0 -50px;
}
.RadGrid_WF .rgExpPDF
{
    background-position:0 -100px;
}
.RadGrid_WF .rgExpCSV
{
    background-position:0 -150px;
}

/*multirow select*/

.GridRowSelector_WF
{
    background:#d7d7d7;
}

/*row drag n drop*/

.GridItemDropIndicator_WF
{
    border-top:1px dashed #d7d7d7;
}

/*tooltip*/

.GridToolTip_WF
{
    border:1px solid #080808;
    padding:3px;
    background:#ccc;
    color:#000;
}

/*rtl*/

.RadGridRTL_WF .rgPageFirst
{
    background-position:0 -1000px;
}
.RadGridRTL_WF .rgPageFirst:hover
{
    background-position:0 -1050px;
}
.RadGridRTL_WF .rgPagePrev
{
    background-position:0 -850px;
}
.RadGridRTL_WF .rgPagePrev:hover
{
    background-position:0 -900px;
}
.RadGridRTL_WF .rgPageNext
{
    background-position:0 -700px;
}
.RadGridRTL_WF .rgPageNext:hover
{
    background-position:0 -750px;
}
.RadGridRTL_WF .rgPageLast
{
    background-position:0 -550px;
}
.RadGridRTL_WF .rgPageLast:hover
{
    background-position:0 -600px;
}

Any ideas would be greatly appreciate.   Attached is an image of part of the grid that shows the dates.  The dates are the same for each line so the color should be red for each of them.

Thanks,

Rhonda

[Daniel]

Hello Rhonda,

There is a CSS rule (.RadGrid_WF .rgRow TD) that overrides the background color.

Please try the following workaround:

if (diffRed.Days >= 1)
{
    dataBoundItem.CssClass += " wfRedHighlight";
}

<style type="text/css">
    tr.wfRedHighlight td
    {
        background-color: Red;
    }
</style>

Regards,
Daniel
the Telerik team