Initalize Grid, add data, export as excel progamatically

[Ronald Koh]

Hi, I am using <ejs-grid> to render my table, it has pagination implemented on the table so only 20 records are loaded at a time. In my current case, when exporting to excel, it will use the template reference of the <ejs-grid> to export.

The problem is that it will only export 20 records at a time. So, I decided to assign my data from api directly to the Grid programatically so I can export it without altering the UI.

Pseudocode will be something like this:

let gridComponent: GridComponent = new GridComponent();

gridComponent.dataSource = myData;

gridComponent.excelExport()

I had tried using the base class Grid and GridComponent but it's not working anyhow I try.

Thanks in advance.



[Aishwarya Rameshbabu]

Hi Ronald Koh,

Greetings from Syncfusion support.

According to the information provided, it appears that there is a problem with exporting Grid data to an Excel document when using paging, as only the records on the first page are exported. We have created a sample based on the information and attempted to reproduce the reported issue but were unable to do so. When exporting the Grid to Excel, all records on all pages were exported correctly. Please refer to the sample and code example below for more information.

App.component.ts

 

<ejs-grid #grid id='Grid' [columns]='columns'

               [toolbar]='toolbarOptions' [allowPaging]='true'   [pageSettings]='pageSettings' [allowExcelExport]='true'

                (toolbarClick)='toolbarClick($event)'>

                </ejs-grid>

 

 

export class AppComponent implements OnInit {

 

    @ViewChild('grid')

    public grid!: GridComponent;

 

    public data: any;

 

    public columns: ColumnModel[] = [

        { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },

        { field: 'CustomerID', headerText: 'Customer Name', width: 150 },

        { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }, 

        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 }

    ];

 

    public toolbarOptions?: ToolbarItems[];

    public pageSettings: Object|undefined;

 

    ngOnInit() {

        this.data = new DataManager({ url: SERVICE_URI + 'api/Orders', adaptor: new WebApiAdaptor });

        this.toolbarOptions = ['ExcelExport'];

        this.pageSettings = { pageSize: 20 };

     }

 

    ngAfterViewInit() {

        (this.grid as GridComponent).dataSource = this.data;

    }

 

    toolbarClick(args: ClickEventArgs): void {

        if (args.item.id === `${this.grid.element.id}_excelexport`) { 

            // Grid component id + _ + toolbar item name

            this.grid.excelExport();

        }

    }

 

}

 

Sample: https://stackblitz.com/edit/github-dp76ix-bxsnti?file=src%2Fapp.component.ts,src%2Fdatasource.ts

If you are still experiencing difficulties, please provide the following details to assist us in further investigating the issue:

1. Specify the type of data binding used in the Grid: Remote or Local data binding.

2. If Remote data binding is used, please provide the adaptor details.

3. Share the complete Grid rendering code, including any event handler functions if utilized.

4. Specify the version of the Syncfusion package currently in use.

5. If possible, share a simple sample to replicate the issue or attempt to replicate it using the provided sample.

Regards

Aishwarya R

[Ronald Koh]

Hi, I want to use Grid to export excel file without rendering it in html file. Is that possible? I want my code to be at the .ts file only. This is my dummy code:

    let data = [

      { ID: 1, Name: 'John', Age: 28, City: 'New York'},

      { ID: 2, Name: 'Ali', Age: 13, City: 'Egg York'},

    ]

    let grid: Grid = new Grid({

      dataSource: data,

      columns: [

        { field: 'ID' },

        { field: 'Name' },

        { field: 'Age' },

        { field: 'City' },

      ],

      allowExcelExport: true

    });

    grid.excelExport({ fileName:'filename.xlsx'});

This does not export any excel file.

Thanks.

[Aishwarya Rameshbabu]

Hi Ronald Koh,

Upon reviewing your request, it appears that you are seeking to export the Grid data without rendering it on an HTML page. Before offering a solution, we require additional information in order to provide a better solution. Please confirm if you intend to export the Grid data without rendering it on the web page (UI). If so, kindly provide the purpose of this use case so that we may assess and verify the feasibility of this requirement. Additionally, please provide the details requested in our previous communication regarding the type of data binding used, adaptor details, package version, and a sample.

Regards

Aishwarya R