I'm upgrading UltraWebGrid v7.2 to v11.1. and I've got some issues with CssClass property. I attached the DisplayLayout property of UWG and part of Css file to end of this article.
What I want to know is,
1. the grid doesn't apply the header and row Style. so I changed the class name like this.
.WebGrid_HeaderStyle -> TH.WebGrid_HeaderStyle, THEAD.WebGrid_HeaderStyle TH .WebGrid_RowStyle -> .WebGrid_RowStyle, TBODY.WebGrid_RowStyle TD
this looks like to be solved, but some pages still have problem with RowStyle. I don't know what exactly I have to do.
2. when refresh the page, always lose RowStyle class. I know the best way to solve this is using CSS to style WebGrid rather than its Style properties. (referenced by http://es.infragistics.com/community/forums/p/15219/55810.aspx)but I don't know how to use CSS to style WebGrid. I hope I dont need to change source too much.
please help.
<DisplayLayout Version="4.00" AllowSortingDefault="OnClient" AllowColSizingDefault="Free" StationaryMarginsOutlookGroupBy="True" HeaderClickActionDefault="SortSingle" Name="uwgDocList" BorderCollapseDefault="Separate" RowSelectorsDefault="No" TableLayout="Fixed" RowHeightDefault="20px" SelectTypeRowDefault="Single" GroupByColumnsHiddenDefault="NotSet" AutoGenerateColumns="False" CellClickActionDefault="RowSelect" SelectTypeColDefault="Single"> <ActivationObject BorderWidth="0px" BorderColor=""> </ActivationObject> <FooterStyleDefault CssClass="WebGrid_FooterStyle"> </FooterStyleDefault> <RowStyleDefault CssClass="WebGrid_RowStyle"> </RowStyleDefault> <HeaderStyleDefault CssClass="WebGrid_HeaderStyle" Font-Bold="True" ForeColor="#333333"> </HeaderStyleDefault> <EditCellStyleDefault CssClass="WebGrid_EditCellStyle"> </EditCellStyleDefault> <FrameStyle CssClass="WebGrid_FrameStyle" Width="100%"> </FrameStyle> <SelectedRowStyleDefault CssClass="WebGrid_SelectedRowStyle"> </SelectedRowStyleDefault> <RowAlternateStyleDefault CssClass="WebGrid_RowAlternateStyle"> </RowAlternateStyleDefault> </DisplayLayout>
.WebGrid_EditCellStyle{}
.WebGrid_FrameStyle{}
TH.WebGrid_HeaderStyle, THEAD.WebGrid_HeaderStyle TH /* before modify: .WebGrid_HeaderStyle */{ }
.WebGrid_RowStyle, TBODY.WebGrid_RowStyle TD /* before modify: .WebGrid_RowStyle */{}
.WebGrid_RowAlternateStyleFixed{}
.WebGrid_RowAlternateStyle{}
.WebGrid_SelectedRowStyle{}
Hello Chloe Lee,
I’m just following up to see if you’ve been able to resolve your issue. If you have any questions or concerns or if you need further assistance please let me know.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support
Hello Chloe ,
Thank you for posting in our forum.
I’ve tested this on my side and it seems that the css style is getting set to the tbody element inside which you have the rows on the initial load and then after postback inside an update panel on the td elements.
If you have some default style applied to the grid you’ll need to keep in mind that its css settings may be overwriting your own.
Generally if you want to change some settings of the cells you would need to define the style like this:
td.WebGrid_RowStyle, .WebGrid_RowStyle > tr > td
{
background-color: Red !important;
}
For example if you define it like this all the rows’ background in the grid would be red.
If you attempt to define it like this:
background-color: Red;
And you use the default theme of the grid then the default style for the cell will overwrite your own so the background will not appear red even though the class if properly set to the correct element.
Also keep in mind that if you want to change some setting of the td elements applying the style directly to the tr element would not work. Instead you would need to add a selector to the correct child element (in this case > tr >td ).
Please refer to the attached sample and let me know if I’ve missed anything from your scenario or if you have any questions or concerns.
Developer Support Engineer II