Export to word by Syncfusion Essential JS 2 Grid for Angular 5

Question

'PDF export' and 'Excel export' features are listed under the documentation for syncfusion-ej2 Grid (https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/). I have already implemented them in my Angular application. Still, I couldn't find any support for 'Word Export'. I did not get any clue by googling even.

I am wondering if there is a way to implement 'Word Export' feature on the grid?

What are the resources that should I look for? or what are the changes that have to be performed on the existing solution, which I have quoted below?

[HTML]

<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-12">
      <ejs-grid #schoolsGrid id="schoolsGrid" [dataSource]="schools" 
        [allowSorting]="true" [allowGrouping]="true" [allowExcelExport]="true"
        [toolbar]="toolbar" [allowPdfExport]="true" 
        [allowSelection]="true" [selectionSettings]="schoolsSelectionOptions" (rowSelected)="schoolsRowSelected($event)"

        [allowFiltering]="true" [filterSettings]="schoolsFilteringSettings"
        [allowPaging]="true" [pageSettings]="schoolsPageSettings"
        (toolbarClick)="schoolsToolbarClick($event)"
        (actionComplete)="gridActionHandler($event)"
        width="100%">

        <e-columns>
          <e-column field="schoolNumber" headerText="School Number" [allowGrouping]="false">
            <ng-template #template let-data>
              <a [routerLink]="[data.schoolNumber]" class="btn-link align-content-center">{{data.schoolNumber}}</a>
            </ng-template>
          </e-column>
          <e-column field="campusNumber" headerText="Campus Number">
            <ng-template #template let-data>
              <a [routerLink]="[data.campusNumber]" class="btn-link align-content-center">{{data.campusNumber}}</a>
            </ng-template>
          </e-column>
          <e-column field="fullSchoolName" headerText="School Name">
            <ng-template #template let-data>
              <a [routerLink]="[data.schoolNumber]" class="btn-link align-content-center">{{data.fullSchoolName}}</a>
            </ng-template>
          </e-column>
          <e-column headerText="Campus Name"></e-column>
          <e-column headerText="Company Name"></e-column>
          <e-column headerText="Trading Name"></e-column>
          <e-column field="abn" headerText="ABN"></e-column>
          <e-column headerText="Start Date"></e-column>
          <e-column headerText="End Date"></e-column>
          <e-column headerText="Contract Value"></e-column>
          <e-column headerText="Principal Name"></e-column>
          <e-column headerText="LGA"></e-column>
          <e-column headerText="Region"></e-column>
          <e-column headerText="Phone Number"></e-column>
          <e-column headerText="M/R"></e-column>
          <e-column headerText="Transition Date"></e-column>
          <e-column headerText="Last Update Date"></e-column>
          <e-column headerText="Updated By"></e-column>
          <e-column field="created" headerText="Created" format="yMd" type="datetime"></e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</div>

[Component]

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { SchoolsService, ISchool } from '../services/schools.service';
import { GridComponent, ToolbarItems, ToolbarService, ExcelExportService, SortEventArgs, PdfExportService, RowSelectEventArgs, SelectionSettingsModel, ToolbarItem } from '@syncfusion/ej2-ng-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { DataManager } from '@syncfusion/ej2-data';

@Component({
  selector: 'app-school-list',
  templateUrl: './school-list.component.html',
  styleUrls: ['./school-list.component.less']
})
export class SchoolListComponent implements OnInit {
  constructor(private router: Router, private route: ActivatedRoute, private schoolsService: SchoolsService) { }

  public schools: ISchool[];

  // Syncfusion GRID settings for the schools grid.
  // Documentation: https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/getting-started.html
  schoolsGridId = 'schoolsGrid';
  @ViewChild('schoolsGrid')
  public schoolsGrid: GridComponent;
  public toolbar: ToolbarItems[];

  //https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-filterSettings.html
  public schoolsFilteringSettings = {};

  //https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-selectionSettings.html
  public schoolsSelectionOptions: SelectionSettingsModel;

  schoolsToolbarClick(args: ClickEventArgs) {
    //handles multiple grids on the page by prepending the Grid ID to the _eventname
    //E.g.
    //if (args.item.id == schoolsGrid_excelexport)....
    if (args.item.id === (this.schoolsGridId + '_excelexport')) {
      this.schoolsGrid.excelExport();
    }
    if (args.item.id === (this.schoolsGridId + '_pdfexport')) {
      this.schoolsGrid.pdfExport();
    }
  }

  schoolsRowSelected(args: RowSelectEventArgs) {
    let selectedrowindex: number[] = this.schoolsGrid.getSelectedRowIndexes();  // Get the selected row indexes.
    console.log(selectedrowindex);
    let selectedRecords: ISchool[] = this.schoolsGrid.getSelectedRecords() as ISchool[];  // Get the selected records.
    let selectedRecord = selectedRecords[0];
    if (selectedRecord) {
      //Do something
    }
  }

  gridActionHandler(args: SortEventArgs) {
    console.log(args.requestType + ' ' + args.type);
  }

  // https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-pageSettings.html
  public schoolsPageSettings = {
    currentPage: 1,
    enableQueryString: true,
    pageSizes: [10, 25, 50, 100],
    pageSize: 10
  };

  ngOnInit() {
    // Get Schools
    this.schools = new Array<ISchool>();
    this.toolbar = ['Print', 'Search', 'ExcelExport', 'PdfExport'];
    this.schoolsService.getSchoolsTest(1000).subscribe((schools) => {
      this.schools = schools;
    });
  }
}

[Module]

import { GridModule, PageService, SortService, GroupService, FreezeService, SelectionService, ExcelExportService, PdfExportService } from '@syncfusion/ej2-ng-grids';
import { ToolbarService } from '@syncfusion/ej2-ng-grids';
import { UploaderModule } from '@syncfusion/ej2-ng-inputs';
import { ToolbarModule } from '@syncfusion/ej2-ng-navigations';
import { DatePickerModule, DateTimePickerModule, TimePickerModule } from '@syncfusion/ej2-ng-calendars';    
import { SchoolsService } from './services/schools.service';

@NgModule({
  imports: [
    GridModule,
    UploaderModule,
    ToolbarModule,
    DatePickerModule,
    DateTimePickerModule,
    TimePickerModule 
  ],  
  providers: [
    PageService, SortService, GroupService, FreezeService, SelectionService, ExcelExportService, PdfExportService,ToolbarService,
    SchoolsService,
  ],
  exports: [
  ]
})
export class AdminModule { }

Answer 1

Currently, Essential JS2 Grid component does not have support to export the word document. As per your requirement we have considered “Word export support for Grid” as a feature and logged a report for the same. The feature will be available in any of the upcoming releases.

Madhu [Syncfusion]