Items per Page Selector and Excel Export not Working on Server

[Patrick Daniel Hermann]

Environment: Angular 7.0.2, Syncfusion EJ2 16.3.30 (NPM), .Net Core 2.1.1 -> See Package.zip

On my dev-machine all works fine, but on Server the Items per Page selector and the Excel Export are not working.

Screenshot from Server:

Screenshot from Dev-Machine:

Excel Export Screenshot from Dev-Machine:

Excel Export from Server:

Picture 2:

Picture 3:

My Imports:

import { Component, OnInit, Input, OnChanges, SimpleChanges, ViewChild, EventEmitter, Output } from '@angular/core';

import { JsonAdaptor } from '@syncfusion/ej2-data';

import {

PageSettingsModel, FilterSettingsModel, GroupSettingsModel, ColumnModel, Column, GridComponent,

Grid, EditService, EditSettingsModel, ToolbarItems, CommandModel, IEditCell, GridModel, DataSourceChangedEventArgs,

RowSelectEventArgs, IRow, NumericEditCell, BooleanEditCell, Sorts, QueryCellInfoEventArgs, DataStateChangeEventArgs,

EditEventArgs, CheckBoxChangeEventArgs, ToolbarService, ExcelExportService, ExcelExport, IFilter, ExcelExportProperties, PageService

} from '@syncfusion/ej2-angular-grids';

import { ToasterConfig, ToasterService } from 'angular2-toaster';

import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

import { createSpinner, showSpinner, hideSpinner, setSpinner } from '@syncfusion/ej2-popups';

@Component({

selector: 'app-recherche-f',

templateUrl: './recherche-f.component.html',

styleUrls: ['./recherche-f.component.css'],

providers: [ToolbarService, ExcelExportService, PageService]

})

export class ...

@ViewChild('fGrid')

public fGrid: GridComponent;

public pageSettingsF: PageSettingsModel = { pageSize: 20, pageSizes: ['5', '10', '20', '50', '100', 'All'] };

public editSettingsF: EditSettingsModel = { allowEditing: true };

public filterOptionsF: FilterSettingsModel = {

type: 'CheckBox'

};

public filterF: IFilter = {

type: 'Menu'

};

public dateFormatOptions: any = { type: 'date', format: 'yyyy-MM-dd' };

public sortOptionsF: Object = { columns: [{ field: 'rK', direction: 'Ascending' }, { field: 'wK', direction: 'Ascending' }, { field: 'dK', direction: 'Ascending' }, { field: 'sn', direction: 'Ascending' }] };

public groupOptionsF: GroupSettingsModel = { showDropArea: false, disablePageWiseAggregates: false, columns: ['rK'] };

public toolbarOptions: ToolbarItems[] = ['ExcelExport'];

public fColumns: ColumnModel[];

public f: Object[];

toolbarClick(args: ClickEventArgs): void {

console.log('Excel-Export');

console.log(args);

if (args.item.id === 'fGrid_excelexport') {

this._toastService.pop('info', ' ', 'Excel-Export gestartet...');

this.fehlteileGrid.excelExport();

this._toastService.pop('info', ' ', 'Excel-Export abgeschlossen...');

}

}

HTML:

<ejs-grid id='fGrid' #fehlteileGrid [dataSource]='f' [allowPaging]='true' [pageSettings]='pageSettingsF'

[allowFiltering]='true' [allowResizing]='true' [allowSorting]='true' [allowGrouping]='true' [groupSettings]='groupOptionsF'

[sortSettings]='sortOptionsF' [filterSettings]='filterOptionsF' [editSettings]='editSettingsF'

[columns]='fColumns' height='600px' [allowExcelExport]='true' [toolbar]='toolbarOptions' (toolbarClick)='toolbarClick($event)'

(queryCellInfo)='customiseCell($event)' ></ejs-grid>

What is Wrong or Missing?

We already have a syncfusion sharedModule

/// <reference types="ej.web.all" />

import { CommonModule } from '@angular/common';

import { NgModule } from '@angular/core';

// Syncfusion

import { ButtonModule, CheckBoxModule, RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

import { ContextMenuModule, SidebarModule, TabModule, TreeViewModule, AccordionModule } from '@syncfusion/ej2-angular-navigations';

import { AccumulationChartModule, ChartModule } from '@syncfusion/ej2-angular-charts';

import { AutoCompleteModule, ComboBoxModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';

import { CalendarModule, DatePickerModule, DateRangePickerModule, DateTimePickerModule, TimePickerModule } from '@syncfusion/ej2-angular-calendars';

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';

import { TooltipModule, DialogModule } from '@syncfusion/ej2-angular-popups';

import { DropDownButtonModule, SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';

import { GridModule, PagerModule, EditService, ToolbarService, CommandColumnService, PageService, DetailRowService, FilterService,

SearchService, SortService, GroupService, GridAllModule, ExcelExportService } from '@syncfusion/ej2-angular-grids';

import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';

import { ListViewModule } from '@syncfusion/ej2-angular-lists';

import { MapsModule } from '@syncfusion/ej2-angular-maps';

import { SliderModule, NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs';

import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';

import { PivotViewModule, GroupingBarService, FieldListService, CalculatedFieldService } from '@syncfusion/ej2-angular-pivotview';

// Components

@NgModule({

imports: [CommonModule],

declarations: [],

exports: [

ButtonModule,

CommonModule,

AccumulationChartModule,

AutoCompleteModule,

CalendarModule,

ChartModule,

CheckBoxModule,

CircularGaugeModule,

ComboBoxModule,

ContextMenuModule,

DatePickerModule,

DateRangePickerModule,

DateTimePickerModule,

DropDownButtonModule,

DropDownListModule,

GridModule,

LinearGaugeModule,

ListViewModule,

MapsModule,

MultiSelectModule,

PagerModule,

RadioButtonModule,

ScheduleModule,

SidebarModule,

SliderModule,

SplitButtonModule,

TabModule,

TimePickerModule,

TooltipModule,

TreeViewModule,

AccordionModule,

DialogModule,

NumericTextBoxAllModule,

PivotViewModule,

GridAllModule

],

providers: [

EditService,

ToolbarService,

CommandColumnService,

PageService,

DetailRowService,

FilterService,

SearchService,

SortService,

GroupService,

GroupingBarService,

FieldListService,

CalculatedFieldService,

ExcelExportService

]

})

export class SyncfusionModule {

}

Attachment: package_cfa97248.zip

[Mohammed Farook J]

 Hi Patrick,  

 

Thanks for contacting Syncfusion support. 

 

We have analyzed you query , we suggest to use ‘actionFailure’ event and share the error details. It helps to find the solution as earlier. 

 

Use the following code with your issue producing machine 

 

 

   <ejs-grid [dataSource]='data' height='350' (actionFailure) ='actionFailure($event)' > 

        <e-columns> 

.  . . 

        </e-columns> 

    </ejs-grid> 

 

[app.component.ts] 

 

 . . . 

 

actionFailure(e:any): void{ 

 

} 

 

 

 

 

Regards, 

J Mohammed Farook 

[Patrick Daniel Hermann]

I have implemented it. There is no output! (The method will never called!)

[Mohammed Farook J]

 

 Hi Patrick,   

 

We have already logged “Grid excel exporting file is corrupted in production mode” as a bug and the fix for this issue will be available in our upcoming patch release. We appreciate your patience until then.  

 

Regards, 

J Mohammed Farook