conditional formatting skews all the skin format once applied to a row in radgrid

[webbdomain]

Hi,

I have a radgrid that I've configured to use the skin Office 2007, and it looks great.  Now, I've started to configure alternate item background color, and it now returns the following in the screenshot for the alternate rows.

(couldn't paste the screenshot image), but basically, the selected orange row is a missing section at the bottom portion where it used to be orange, but now shows the alternate row background color.

In addition, if I start to apply conditional formatting to a row it wants to use a separate css class rather than the skin css, so for that row, I lose the format of the Office 2007 skin.  I'm doing this thru code.

________________________

Protected Sub rgOutNAbout_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rgOutNAbout.ItemDataBound

'Conditional Formatting DataGrid Row

If (TypeOf e.Item Is Telerik.Web.UI.GridDataItem) Then

Dim dataItem As Telerik.Web.UI.GridDataItem = CType(e.Item,  Telerik.Web.UI.GridDataItem)

If (dataItem("Returning On").Text < DateTime.Now) Then

dataItem.CssClass =

"ReturnDateTime"

End If

End If

End Sub

___________________

Is there a way around this? How can I find which css class the row items are using from the skin?

Any help would be appreciated.

Thanks.

[webbdomain]

Hi,

I just wanted to update this thread in that I was able to code the conditional formatting of the record row on a radgrid using a skin without losing the skin settings on it.

I did so on ItemDataBind in VB.

However, I still have the issue with the alternating style selected item style not showing properly.

I'll play around with that some more to see if I can figure out why the alternate item style background color causes displays weird when that item row is selected. 

Skin used is Office2007 on RadGrid with alternating item background color set.

[Dimo]

Hello,

When declaring custom styles for RadGrid rows, (e.g. AlternatingItemStyle), you should be aware of two things:


1) AlternatingItemStyle causes RadGrid to render an inline style in the HTML output, which takes precedence over skin styles. As a result, the declared alternating item style may override row hover and selected row styles from the skin.

The correct approach in this case is to declare CSS classes, not styles. For example:

<AlternatingItemStyle CssClass="MyRowClass" />

And then use some simple CSS:

.RadGrid_Skin  tr.MyRowClass
{
    background: blue ;
}

In this case the custom CSS class is NOT applied on hover and on row select, so the skin styles for hovered and selected rows are preserved.


2) Using AlternatingItemStyle or SelectedItemStyle to set a background color will NOT automatically remove any skin-defined background images for these rows. You have to remove the manually with a custom CSS rule, for example:


.RadGrid_Skin  tr.MySelectedClass
{
    background: none  orange ;
}



Here is a more complete example of setting custom styles for RadGrid rows:

ASPX

<telerik:RadGrid>
    <SelectedItemStyle CssClass="MySelectedClass" />
    <MasterTableView>
        <AlternatingItemStyle CssClass="MyRowClass" />
    </MasterTableView>
</telerik:RadGrid>

CSS

.RadGrid_Office2007 tr.MyRowClass
{
   background:none blue;
}
.RadGrid_Office2007 tr.MySelectedClass
{
   background:none orange;
}

You may also find this blog post useful:

How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin


Let us know if you need more information.


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.