How to save a exported file with a proper name file and not pivot?
Hi Deo,
Thank you for posting your question.
The custom name of the exported file can be set by using the exportTo()
API call and modifying its params
property.
We've prepared a quick example to demonstrate this approach: https://jsfiddle.net/flexmonster/q4ymLpgr/
For more info on the exportTo()
feel free to check out the following documentation page: https://www.flexmonster.com/api/exportto/
Please let us know if this helps.
Best regards,
Mykhailo
Hi Mykhailo,
Do you have a another solution that don't involve having an external button from of that Flexmonster grid? Is it possible to have it in the buttons of the table itself as per attached?
Cheers,
Hello, Deo,
Thank you for your question.
We would like to kindly inform you that the desired functionality can be achieved by adding the button to the Toolbar or changing an existing one. The Toolbar can be customized using the beforetoolbarcreated event. The full tutorial dedicated to the Toolbar customization can be found in our documentation.
You are welcome to check out an example we have prepared for you in order to demonstrate the mentioned approach. All tabs of the drop-down menu of the "Export" button are changed in the way the file is downloaded with a specified custom name.
We would like to draw your attention to the following code snippet in order to get a better understanding of the process of customization:
function customizeToolbar(toolbar) {
var tabs = toolbar.getTabs(); <= getting all current tabs of the toolbar
toolbar.getTabs = function() { <= setting the overwritten list of tabs
tabs[3].menu[1].handler = exportHandler; <= changing the handler of the third tab ("Export") to an appropriate function
tabs[3].menu[1].args = { <= setting arguments which are going to be passed to the handler
type: 'html',
filename: 'Custom filename for HTML'
}
...
return tabs;
}
}
function exportHandler(params) { <= function that export the data in an appropriate format basing on received parameters
pivot.exportTo(params.type, {
filename: params.filename
})
}
We hope it helps.
Do not hesitate to contact us in case of additional questions.
Kind regards,
Illia
Hi Illia,
I tried using the sample code, able to call the handler. But its throwing error while applying to fm-pivot.
Please check the code
import { Component, OnInit, Input } from '@angular/core';
import * as Flexmonster from 'flexmonster';
import { FlexmonsterPivot } from 'ng-flexmonster';
@Component({
selector: 'aiq-flexmonster',
templateUrl: './flexmonster.component.html',
styleUrls: ['./flexmonster.component.scss']
})
export class FlexmonsterComponent implements OnInit {
report;
@Input() data: any;
@Input() rows: any;
@Input() showConfiguratorButton = false;
toolbar = true;
selectedRows = {};
constructor() {
}
customizeCellFunction(cell, data): any {
//console.log(data)
if (data.type === "value" && !data.isDrillThrough && cell.text.includes('<')) {
cell.style['z-index'] = 2;
cell.text = data.member.caption;
}
if (data.measure && data.type != 'header' && data.measure.uniqueName == "Checkbox") {
cell.text = `<input type="checkbox" value="1" onchange="onCheck(event)" 'checked' >`;
cell.style['z-index'] = 2;
}
}
customizeToolbar(toolbar) {
// get all tabs
let tabs = toolbar.getTabs();
toolbar.getTabs = function() {
tabs[3].menu[1].handler = exportHandler;
tabs[3].menu[1].args = {
type: 'html',
filename: 'test.html'
}
return tabs;
}
function exportHandler(params) { /// giving error this.report as undefined
if(this.report){
this.report.exportTo(params.type, {
filename: params.filename
})}
}
}
onCheck(event) {
this.selectedRows[event.target.value] = event.target.checked;
}
preventExpand(e): any {
e.stopImmediatePropagation();
}
ngOnInit(): any {
this.report = {
dataSource: {
data: this.data
},
options: {
grid: {
type: "flat",
showGrandTotals: false,
datePattern: "yyyy/MM/dd HH:mm:ss",
showHeaders: false
},
configuratorButton : this.showConfiguratorButton
},
formats: [
{
textAlign: "left",
nullValue: "1",
thousandsSeparator: ""
}
],
slice: {
rows: this.rows,
columns: [],
measures: [{uniqueName: "Checkbox"}, {uniqueName: "hostName"}, {uniqueName: "serialNumber"}]
}
};
}
}
Hello,
Thank you for reaching out to us.
Please see our reply in the following forum thread: https://www.flexmonster.com/question/unable-to-customize-export-in-angular/
Kind regards,
Vera
Hi Team,
Just following this thread, I am trying to customize the header on exported excel files using this approach without an external excel button. When I set the filename, it works properly as the example prepared by Illia, but not the excel header. I am pasting bellow just an extract as an example of what I am doing:
tabs[3].menu[3].args = {
type: 'excel',
filename: "test",
header:"First header row\nSecond header row" ,
}
Thank you,
Rodrigo
Hello, Rodrigo,
Thank you for your question.
We would like to kindly explain that not only args
should be changed in order to add some parameters while exporting, but the handler needs modifications as well.
We have prepared an example allowing export to Excel with custom headers specified.
Our team would like to kindly draw your attention to the following code snippets taken from the example:
The following code demonstrates an appropriate way to specify the args
object in order to pass more parameters to the handler. The type
property is dedicated to defining the export type when the config
property contains all additional information about the export. In our case, it includes filename
and header
properties.
tabs[3].menu[3].handler = exportHandler;
tabs[3].menu[3].args = {
type: 'excel',
config: {
filename: 'Custom filename for Excel',
header: 'First header row\\nSecond header row'
}
}
The handler function should be modified in an appropriate way as well.
Now it is going to call an exportTo
method passing parameters as shown below. Such a structure allows avoiding adding new parameters to the handler each time they need to be applied.
function exportHandler(params) {
pivot.exportTo(params.type, params.config)
}
Please note that all properties of the config
object should be named similar to ones described in our documentation dedicated to export and print.
We hope it helps.
Do not hesitate to contact us in case additional questions arise.
Best regards,
Illia
Thank you very much Illia!