Is there a way to style GroupedRows differently depending on the grouping level? In InitializeRow you can set the styles on a per row basis as in
cells(3).CssClass = "level1"
but I can't find any way of setting different styles on different groups rows.
I would like to do something like this but there is no exposed cssclass on a grouped row.
Private Sub whdgRecordLinks_GroupedRowInitialized(sender As Object, e As Infragistics.Web.UI.GridControls.GroupedRowEventArgs) Handles whdgRecordLinks.GroupedRowInitialized If e.GroupedRow.OwnerCollection.ParentRow Is Nothing Then e.GroupedRow.CssClass = "level1"
End If End Sub
I have also tried applying styles such as
TBODY TR.GroupRow TD { background-image: url(./ig_res/Office2010Blue/images/captionbackground.gif); font-weight: bold; }
This works but applies to all GroupRows.
Hi JJB,
You should submit a feature request for the missing group row css property. In the mean time, you should be able to work around this by setting an item css class on the container grid.
tbody.customClass>tr.igg_GroupedRow>td {
background-image: url(./ig_res/Office2010Blue/images/captionbackground.gif); font-weight: bold; }
Just have a different custom class for each level.
regards,David Young
Hi David,
Thanks for the reply. I have tried this by setting the itemcss on the container grid.
Private Sub whdgRecordLinks_GroupedRowInitialized(sender As Object, e As Infragistics.Web.UI.GridControls.GroupedRowEventArgs) Handles whdgRecordLinks.GroupedRowInitialized
Dim Con As ContainerGrid = CType(sender, ContainerGrid) If e.GroupedRow.OwnerCollection.ParentRow Is Nothing Then Con.ItemCssClass = "level11" e.GroupedRow.Text = GetGroupedRowText(e.GroupedRow.Text, Grouping.RecordType, Nothing) Else Con.ItemCssClass = "level22" e.GroupedRow.Text = GetGroupedRowText(e.GroupedRow.Text, Grouping.Record, e.GroupedRow.OwnerCollection.ParentRow.Value.ToString) End If
End Sub
and setting the css classes in the aspx:
tbody.level11 > tr.GroupRow > td { font-weight: bold; padding-left: 40px; } tbody.level22 > tr.GroupRow > td { background-image: url(./ig_res/Office2010Blue/images/captionbackground.gif); font-weight: bold; padding-left: 80px; }
Looking at the resulting markup it appears the both levels of grouping are under the same container grid as <tr> tags and the container has the has the last class set in code ie level22.
<tbody class="ig_ClaymationItem igg_ClaymationItem level22" id="x:2121479870.12:mkr:rows"
mkr="rows" _object="[object Object]">
All grouprows have the same style so this does not appear to distinguish
between different grouping levels.
So that was my fault. I was confused by level. I thought you meant a child grid. Oops. But you actually mean two levels of grouping in one level. You can also do this with css. Try the following:
tbody>tr[lvl="0"]>td { background : Red;} tbody>tr[lvl="1"]>td { background : black;}
If you only want this to target one grid, set the container grid ItemCssClass to something and change the class to
tbody.something>tr[lvl="0"]>td { background : Red;} tbody.something>tr[lvl="1"]>td { background : black;}
That way you could change per level of grid or grid on a page. Hopefully this will get you chugging along.
-Dave
Hi Dave,
Awesome! That's done the trick!!
Thanks,
Andy