I posted queries over a month ago and received good help about the format being lost in the summary row when I export a WebDataGrid to excel. I had included the question about the main data rows (the "body" of the grid) which are also not formatted according to the stylesheet being applied to those rows when exported. I never got a reply about this main data row issue and have not been able to determine a workaround.
As it is currently, my header and summary rows have the proper color, font, font-size, horizontal alignment etc format because I used the workarounds. The main rows, however, do not retain the stylesheet settings and this is not satisfactory for my users. Please tell me there is a workaround or some kind of fix that will retain the styles from the stylesheet for the main data rows of the grid.
Here is what is in the stylesheet that is reflected on the web page when the grid renders but is not being retained in the export:
tbody tr.RowDetail td { background-color:white; } tbody tr.RowDetailAlt td { background-color:#C2C2A0; } tbody > tr > td.Left { text-align:left; border-color:Gray; border-style:ridge; border-width:1px; border-left-color:White; border-left-width:0px; border-top-color:White; border-top-width:0px; white-space:nowrap; font-family:Verdana; font-size:8pt; } tbody > tr > td.Right { text-align:right; border-color:Gray; border-style:ridge; border-width:1px; border-left-color:White; border-left-width:0px; border-top-color:White; border-top-width:0px; white-space:nowrap; font-family:Verdana; font-size:8pt; } tbody > tr > td.Center { text-align:center; border-color:Gray; border-style:ridge; border-width:1px; border-left-color:White; border-left-width:0px; border-top-color:White; border-top-width:0px; white-space:nowrap; font-family:Verdana; font-size:8pt; }
Thanks so much.
Kurt
Hi Kurt,
Could you let me know how you're assigning these css classes? From the aspx? In an event? If you show me where to assign them, I will try to reproduce the problem here.
regards,
David Young
Hi David,
Thanks for agreeing to try to help me. Here is one of the grids where when I export to excel the headers and footers are formatted correctly (correct color, alignment, font, etc.) but the main rows are not.
<ig:WebDataGrid ID="grdReports" runat="server" AutoGenerateColumns="False" CssClass="ControlClass" ItemCssClass="RowDetail" AltItemCssClass="RowDetailAlt" EnableTheming="false" AjaxIndicator-Enabled="True" AjaxIndicator-Location="AboveCenter"> <Columns> <ig:BoundDataField DataFieldName="D3LOCCD" Key="D3LOCCD" Header-CssClass="HeaderCaptionClass" CssClass="Center" Width="50" > <Header Text="Loc" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="D3TBLDT" Key="D3TBLDT" Header-CssClass="HeaderCaptionClass" CssClass="Center" Width="80" DataFormatString="{0:MM/dd/yyyy}" > <Header Text="Invoice Date" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="D3TICKET" Key="D3TICKET" Header-CssClass="HeaderCaptionClass" CssClass="Center" Width="75" > <Header Text="Ticket #" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="D3COMOD" Key="D3COMOD" Header-CssClass="HeaderCaptionClass" CssClass="Center" Width="80" > <Header Text="Commodity" /> <Footer Text="Totals:" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="D3AMOUNT" Key="D3AMOUNT" Header-CssClass="HeaderCaptionClass" CssClass="Right" DataFormatString="{0:$###,###,##0.00}" Width="60" > <Header Text="Amount" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="D3NET" Key="D3NET" Header-CssClass="HeaderCaptionClass" CssClass="Right" DataFormatString="{0:###,###,##0.00}" Width="80" > <Header Text="Net Quantity" /> </ig:BoundDataField> </Columns> <Behaviors> <ig:Activation Enabled="true" /> <ig:Paging PagerAppearance="Bottom" PagerCssClass="Pager" QuickPages="8" PagerMode="NumericFirstLast" Enabled="true" PageSize="10"> </ig:Paging> <ig:Sorting SortingMode="Single" Enabled="true"> </ig:Sorting> <ig:ColumnMoving Enabled="false" /> <ig:ColumnResizing Enabled="true" /> <ig:SummaryRow Enabled="true" EnableSummariesFilter="False" FormatString="{1}" ShowSummariesButtons="False" SummariesCssClass="Summary" EmptyFooterText=""> <ColumnSummaries> <ig:ColumnSummaryInfo ColumnKey="D3LOCCD"> <Summaries> <ig:Summary SummaryType="Custom" CustomSummaryName="Blank" /> </Summaries> </ig:ColumnSummaryInfo> <ig:ColumnSummaryInfo ColumnKey="D3TBLDT"> <Summaries> <ig:Summary SummaryType="Custom" CustomSummaryName="Blank" /> </Summaries> </ig:ColumnSummaryInfo> <ig:ColumnSummaryInfo ColumnKey="D3TICKET"> <Summaries> <ig:Summary SummaryType="Custom" CustomSummaryName="Blank" /> </Summaries> </ig:ColumnSummaryInfo> <ig:ColumnSummaryInfo ColumnKey="D3COMOD"> <Summaries> <ig:Summary SummaryType="Custom" CustomSummaryName="Text" /> </Summaries> </ig:ColumnSummaryInfo> <ig:ColumnSummaryInfo ColumnKey="D3AMOUNT"> <Summaries> <ig:Summary SummaryType="Custom" CustomSummaryName="SumAmt" /> </Summaries> </ig:ColumnSummaryInfo> <ig:ColumnSummaryInfo ColumnKey="D3NET"> <Summaries> <ig:Summary SummaryType="Custom" CustomSummaryName="SumNet" /> </Summaries> </ig:ColumnSummaryInfo> </ColumnSummaries> <ColumnSettings> <ig:SummaryRowSetting ColumnKey="D3LOCCD" ShowSummaryButton="false"> <SummarySettings> <ig:SummarySetting CssClass="SummaryCaptionClass" ShowOptionInDropDown="false" SummaryType="Custom" CustomSummaryName="Blank" FormatString="{1}" /> </SummarySettings> </ig:SummaryRowSetting> <ig:SummaryRowSetting ColumnKey="D3TBLDT" ShowSummaryButton="false"> <SummarySettings> <ig:SummarySetting CssClass="SummaryCaptionClass" ShowOptionInDropDown="false" SummaryType="Custom" CustomSummaryName="Blank" FormatString="{1}" /> </SummarySettings> </ig:SummaryRowSetting> <ig:SummaryRowSetting ColumnKey="D3TICKET" ShowSummaryButton="false"> <SummarySettings> <ig:SummarySetting CssClass="SummaryCaptionClass" ShowOptionInDropDown="false" SummaryType="Custom" CustomSummaryName="Blank" FormatString="{1}" /> </SummarySettings> </ig:SummaryRowSetting> <ig:SummaryRowSetting ColumnKey="D3COMOD" ShowSummaryButton="false"> <SummarySettings> <ig:SummarySetting CssClass="SummaryCaptionClass" ShowOptionInDropDown="false" SummaryType="Custom" CustomSummaryName="Text" FormatString="{1}" /> </SummarySettings> </ig:SummaryRowSetting> <ig:SummaryRowSetting ColumnKey="D3AMOUNT" ShowSummaryButton="false"> <SummarySettings> <ig:SummarySetting CssClass="SummaryCaptionClass" ShowOptionInDropDown="false" SummaryType="Custom" CustomSummaryName="SumAmt" FormatString="{1:$###,###,##0.00}" /> </SummarySettings> </ig:SummaryRowSetting> <ig:SummaryRowSetting ColumnKey="D3NET" ShowSummaryButton="false"> <SummarySettings> <ig:SummarySetting CssClass="SummaryCaptionClass" ShowOptionInDropDown="false" SummaryType="Custom" CustomSummaryName="SumNet" FormatString="{1:###,###,##0.00}" /> </SummarySettings> </ig:SummaryRowSetting> </ColumnSettings> </ig:SummaryRow> </Behaviors> <EmptyRowsTemplate> <div style="text-align:center;"> <br /> <br /> No Rows Found. </div> </EmptyRowsTemplate> <ErrorTemplate> <div style="text-align:center;"> <br /> <br /> Error loading grid. </div> </ErrorTemplate> </ig:WebDataGrid>
Thanks again - your help is much appreciated.
Hi Dave,
Thank you so much, the workaround with the row detail styles allows me to set color, font and alignment for the whole row which looks a lot better than what it was. I can set alignment for the row all to the right and my users probably won't mind in the meantime that some data is not centered in the rows of the spreadsheet like they are on the web page grid. I will do as you say regarding the service release. Glad I could help identify some issues and thanks again for your help!
I've submitted these two issues just now. They are bugs 78433 and 78435. I will be looking at them later today. What I would suggest to you is to contact developer support and have this case attached to those bugs. That way you will be notified when a Service Release containing the fix is released. I expect it to be our next one, however.
-Dave
Thanks for the sample code. I believe I am able to replicate your problem. I believe I have identified two possible issues. The first one is that your colors defined per row via ItemCssClass and AltItemCssClass are not being applied. I actually was able to get around that with no changes to the code by altering the css.
tbody>tr.RowDetail>td
{
background-color: white;
}
tbody>tr.RowDetailAlt>td
background-color: #C2C2A0;
It still showed up in the browser (well, not IE 6 I guess) and it exported as well. It seems we don't handle the css if it doesn't use '>' as part of selectors. I'll figure out what we can do for that. It also looks like you'd have to remove the spaces from your center, left, and right css classes. Which brings us to the second problem. You're not seeind the right or center text alignment that you set? I think this is another bug on our part. The only work around until it is fixed would be to handle cell exported and modify the style of the worksheet cell. I'll get back to you with bug numbers once I have them. Thanks for your patience and in identifying these issues.