We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Items per Page Selector and Excel Export not Working on Server

Thread ID:

Created:

Updated:

Platform:

Replies:

140763 Nov 6,2018 07:24 AM UTC Nov 9,2018 12:35 PM UTC Angular - EJ 2 3
loading
Tags: Grid
Patrick Daniel Hermann
Asked On November 6, 2018 07:24 AM UTC

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 [Syncfusion]
Replied On November 7, 2018 12:18 PM UTC

 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
Replied On November 7, 2018 02:08 PM UTC

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

Mohammed Farook J [Syncfusion]
Replied On November 9, 2018 12:35 PM UTC

 
 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 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;