Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Exporting To Excel

Answered
Jason Lewis asked on September 2, 2020

When I export my data to Excel I am adding a Header and a Footer. The text in the Header and Footer is aligning to the right in the cell. Is there an option to force alignment to the left or center?

12 answers

Public
Milena Pechura Milena Pechura Flexmonster September 4, 2020

Hello, Jason,
 
Thank you for posting to our forum.
 
We would like to kindly inform you that we did not manage to reproduce aligning to the right behavior. We have tested on different browsers and operating systems – the text is aligning to the left. Please see the example we tested.
 
Could you please provide further details or modify the example? This would greatly help us in our investigation.
 
Looking forward to hearing from you.
 
Best regards,
Milena

Public
Jason Lewis September 4, 2020

An example of my output is attached. I have modified the data since it is confidential but the layout is exactly as exported. As you can see, the header and footer are right aligned and the cells are not completely merged to match the data.

Attachments:
FlexMonsterOutput.xlsx

Public
Milena Pechura Milena Pechura Flexmonster September 8, 2020

Hello, Jason!
 
Thank you for sending the example of the output.
 
Our team has specified the same layout – we still did not manage to reproduce the issue.
 
Could you please send us the sample to export the grid from? This will help us to understand the cause of the problem and provide you with the most relevant solution.
 
You are welcome to modify the example we mentioned in the previous answer: https://jsfiddle.net/flexmonster/cg5xrau3/. For instance, specify the data, report config, header, and footer.
 
Looking forward to your response.
 
Kind regards,
Milena

Public
Jason Lewis September 8, 2020

I cannot include the actual data since it is confidential. Here is my component definition in case something in the configuration is impacting the export.
 
var flex_dataTable = new Flexmonster({
container: “tableDiv_Table”,
componentFolder: “COMPONENT_FOLDER”,
toolbar: true,
beforetoolbarcreated: customizeToolbar,
customizeCell: customizeCellFunction,
width: “100%”,
height: “800”,
global: {
localization: {
“grid”: {
“blankMember”: “”
}
}
},
report: {
dataSource: {
data: fmTable_data
},
options: {
grid: {
type: “classic”,
showTotals: “off”,
showGrandTotals: “off”,
},
showAggregationLabels: false,
},
formats: [
{
name: “”,
thousandsSeparator: “,”,
decimalSeparator: “.”,
decimalPlaces: 3,
maxDecimalPlaces: 3,
maxSymbols: 200,
currencySymbol: “”,
currencySymbolAlign: “left”,
isPercent: false,
nullValue: “”,
infinityValue: “Infinity”,
divideByZeroValue: “Infinity”,
textAlign: “right”
},
{
name: “percentDisplay”,
thousandsSeparator: “,”,
decimalSeparator: “.”,
decimalPlaces: 3,
maxDecimalPlaces: 3,
maxSymbols: 200,
currencySymbol: “”,
currencySymbolAlign: “left”,
isPercent: true,
nullValue: “”,
infinityValue: “Infinity”,
divideByZeroValue: “Infinity”,
textAlign: “right”
}
],
slice: {
rows:
[
{ uniqueName: “Customer” },
{ uniqueName: “ShipTo” },
{ uniqueName: “ShipToCityState” },
{ uniqueName: “BomDescription” },
{ uniqueName: “CustomerPartNumber” },
{ uniqueName: “Packaging” },
{ uniqueName: “TermsAndPort” }
],
columns:
[
{ uniqueName: “[Quantity]”, “sort”: “desc”}
],
measures:
[
{ uniqueName: “CurrentPrice”},
],
expandAll: true,
}
},
licenseKey: “MY_LICENSE_KEY”
});
function exportHandler(params) {
flex_dataTable.exportTo(params.type, params.config)
}
function customizeToolbar(toolbar) {
var tabs = toolbar.getTabs();
toolbar.getTabs = function () {
// remove the connect button
delete tabs[0];
// remove the open button
delete tabs[1];
// remove the save button
delete tabs[2];
// remove the fullscreen button
delete tabs[12];

tabs[3].menu[1].handler = exportHandler;
tabs[3].menu[1].args = {
type: “html”,
config: {
filename: “CustomerPriceListReport”,
header: “Washington Penn Plastic Co. Inc. – Customer Price List”,
footer: “<div>Confidential</div>”,
}
}
tabs[3].menu[2].handler = exportHandler;
tabs[3].menu[2].args = {
type: “csv”,
config: {
filename: “CustomerPriceListReport”,
}
}
tabs[3].menu[3].handler = exportHandler;
tabs[3].menu[3].args = {
type: “excel”,
config: {
filename: “CustomerPriceListReport”,
header:”Washington Penn Plastic Co. Inc. – Customer Price List”,
footer:”Confidential”,
excelSheetName: “CustomerPriceList”,
}
}
tabs[3].menu[4].handler = exportHandler;
tabs[3].menu[4].args = {
type: “image”,
config: {
filename: “CustomerPriceListReport”,
header: “Washington Penn Plastic Co. Inc. – Customer Price List”,
footer: “<div>Confidential</div>”,
}
}
tabs[3].menu[5].handler = exportHandler;
tabs[3].menu[5].args = {
type: “pdf”,
config: {
filename: “CustomerPriceListReport”,
header: “Washington Penn Plastic Co. Inc. – Customer Price List”,
footer: “<div>Confidential</div>”,
pageOrientation : “landscape”,
}
}
return tabs;
}
}
function customizeCellFunction(cell, data) {
if (data.isGrandTotalRow) cell.addClass(“fm-grand-total-r”);
if (data.isTotalRow) cell.addClass(“fm-total-r”);
}

Public
Milena Pechura Milena Pechura Flexmonster September 10, 2020

Hello, Jason,
 
Thank you for providing the component definition.
 
We have tested the config you sent – the alignment of header and footer in the excel file is still to the left on our side.
 
Please have a look at the example with your configuration specified. Perhaps we missed something and need to add a piece of code to reproduce the issue?
Also, please let us know on which browser and OS you are testing the problem.
 
If possible, could you please provide us with access to the test environment? That would help us a lot in our further investigation.
 
Looking forward to your response.
 
Best regards,
Milena

Public
Jason Lewis September 10, 2020

I have repeated the issue in Firefox and Edge.
I recently upgraded to version 2.8.14 but had been using an older version. I was wondering if some of the code is pointing to the older version I still have on the server or in cache. Is the alignment controlled by a stylesheet or is there something in the code I can check to make sure everything is up to date? I know when I first tried the update it still used the old version and I fixed that by changing my include to flexmonster.js?ver=2-8 to insure it loaded the latest version and not a cached copy.

Public
Jason Lewis September 10, 2020

I believe I have found the issue. Since my columns are numeric I wanted them right aligned so I included the following in my stylesheet:
 
/* FlexMonster -> Right Align Column Headers */
#fm-pivot-view .fm-header-c {
text-align: right !important;
}
 
Including this also right aligns the page header and page footer. Do you know of a way for me to right align my column headers without right aligning the page header and footer?
 

Public
Milena Pechura Milena Pechura Flexmonster September 15, 2020

Hello, Jason,
 
Thank you for providing detailed info about the issue.
 
We have looked through the component code – indeed, column header styles (.fm-header-c) are applied to the header and footer in the Excel file.
 
Our team prepared a workaround for your case: we added a function on the reportcomplete event, that applies specific text-align to the header and footer. Also, we specified align for column headers in the CSS box on JSFiddle.
Therefore, we suggest adding a piece of code from line 92 to line 99 (JS) and styles from the CSS box to your project. If you want to change the text-align value, please modify line 97 of JS code.
Please define exactly those CSS selectors that we specified in the example and note that we are not using !important.
 
Also, you asked a couple of questions about updating the Flexmonster version. Please see more details below:

  1. To ensure that you are using the version you have updated to, please clear the cache.
  2. You can check the component’s version by clicking on the grid and pressing Ctrl+Alt+i.

 
We hope it helps. Do not hesitate to contact us in case any further questions arise.
 
Best regards,
Milena

Public
Jason Lewis September 15, 2020

Thanks, that option will be very helpful.
One feature request I would like to add is additional control of formatting when exporting data. We are just starting to expand our use of your component and when users export the data they are expecting output like we generate with our other reporting tools. Any additional functionality for formatting the output (options to set font, bold column headers, etc) would be appreciated.

Public
Milena Pechura Milena Pechura Flexmonster September 17, 2020

Hello, Jason,
 
We are glad to hear that our workaround helps.
 
Your suggestion on adding an export formatting feature sounds reasonable, and we have added an appropriate task to our backlog.
 
Also, we have modified our example to show all styles that could be applied to the export data for now. Please have a look, we hope it can be helpful for your case.
On lines 19-29 in the JS box we set formatting for the values, on lines 71-82 for the header and footer, in the CSS box – for column headers. Please kindly note that during our investigation we changed selectors and added !important for some of them in the CSS box.
 
Please let us know if it helps.
 
Best regards,
Milena

Public
Milena Pechura Milena Pechura Flexmonster September 30, 2020

Hello, Jason,
 
We were wondering whether our example helps.
Does specifying all possible styles in the example facilitate the process of your product development?
 
Looking forward to your response.
 
Best regards,
Milena

Public
Jason Lewis September 30, 2020

Sorry for not responding. Yes, the example you provided gave me everything I needed and I was able to expand on it to change some other styles in my output.
Thanks.

Please login or Register to Submit Answer