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

How to save a exported file with a proper name file and not pivot?

Answered
Deo Bernal asked on February 26, 2020

How to save a exported file with a proper name file and not pivot?

Attachments:
Pivot file name.png

8 answers

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster February 26, 2020

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

Public
Deo Bernal March 6, 2020

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,
 

Attachments:
exporting filename.PNG

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 6, 2020

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

Public
shilpi March 11, 2020

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(‘&lt;’)) {
          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”}]
      }
  };
  }

}

Public
Vera Didenko Flexmonster March 11, 2020

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

Public
Rodrigo March 24, 2020

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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 25, 2020

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

Public
Rodrigo March 26, 2020

Thank you very much Illia!

Please login or Register to Submit Answer