We export data from WebDataGrid using WebExcelExporter. In the grid, we right align all the columns which have numeric data (by updating the grid CSS). However, when we export this data to excel, the horizontal alignment setting is not exported.
Please let us know how to fix this. We need to be able to format header, data rows as well as summary row (if any).
Thanks!
Hello Sumit,
The WebExcelExporter should pick up styles automatically as the EnableStylesExport Property is true by default. The fields and their headers all have CssClass peroperties:
<ig:BoundDataField DataFieldName="PostalCode" Key="PostalCode" CssClass="rightAlign">
<Header Text="PostalCode" CssClass="redHeader">
</Header>
</ig:BoundDataField>
Which will pick up the following styles:
tbody>tr>td.rightAlign {
text-align:right;
background-color:red;
}
.redHeader {
background-color:#b60101;
As for summaries the row can accept global setting for all cells:
<ig:SummaryRow SummariesCssClass="summaryStyle">
…
</ig:SummaryRow>
There seems to be some preference in parsing the styles on the page that I want to investigate further, but I did find the exporter picks up a global class, so something like this works:
th.summaryStyle{
/*client override*/
background-color: #00c1ff;
.summaryStyle{
/*export style*/
The SummaryRow also has SummarySettings that can accept CssClass for a single summary cell configuration.
I’ve attached a sample that successfully exports column, header and summary styles.
Let me know if this helps and if I may be of further assistance.
Regards,Damyan PetevAssociate Software DeveloperInfragistics, Inc.
Hi Damyan,
The grid is exporting all the default styles but none of the custom styles (that we applied through our own CSS) are being exported. For example, we have created our own CSS to right or left align the grid cell text. We have these CSS in the master page and these are being applied correctly but not being exported to excel.
tbody.igg_Office2010BlueSummary > tr > td.igg_Office2010BlueSummaryRight { text-align:right; padding:0 8px 0 8px; }
tbody.igg_Office2010BlueSummary > tr > td.igg_Office2010BlueSummaryLeft { text-align:left; padding:0 8px 0 8px; }
Thanks.
Hello,
Since the application of styles happens when exporting it is on the server side and while the exporter parses the styles for the page it might not be able to recognize styles as good as the browser itself, so as I mentioned global classes seem to help with that, even if they are redundant.
Can you try to do the same thing as the summaryStyle above – one rule that successfully overrides the client-side and one rule with just the CssClass property that the exporter is guaranteed to discover:
tbody.igg_Office2010BlueSummary > tr > td.igg_Office2010BlueSummaryRight { text-align:right; padding:0 8px 0 8px;}.igg_Office2010BlueSummaryRight { /* for exporting only */ text-align:right; padding:0 8px 0 8px;}
The same treatment for left and let me know if this helps.
Regards,
Damyan Petev
Associate Software Developer
Infragistics, Inc.