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 Dave,
Awesome! That's done the trick!!
Thanks,
Andy
Hi JJB,
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 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.
Hello Damian,I have logged “Add css property for grouped row” as a new product idea per David’s suggestion. Our product team chooses new product ideas for development based on popular feedback from our customer base. Infragistics continues to monitor application development for all of our products, so as trends appear in requested features, we can plan accordingly.
We value your input, and our philosophy is to enhance our toolset based on customer feedback. If your feature is chosen for development, you will be notified at that time. Your reference number for this product idea is PI12070156.
If you would like to follow up on your product idea at a later point, you may contact Developer Support management via email. Please include the reference number of your product idea in the subject and body of your email message. You can reach Developer Support management through the following email address: dsmanager@infragistics.com
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