Import excel data in to grid

The Syncfusion Grid component allows you to import data from Excel files into your web application for display and manipulation within the grid. This functionality is particularly useful for scenarios where data needs to be easily loaded into the grid from Excel files. This can be achieved by using Uploader component change event.

To import excel data in to grid, you can follow these steps:

1. Import excel file using uploader control.
2. Parse the excel file data to JSON using the XLSX library.
3. Bind the JSON to the grid control.

The following example demonstrates how to import Excel data into the grid by utilizing the Uploader component’s change event along with the XLSX library:

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { UploaderComponent } from '@syncfusion/ej2-angular-inputs';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-root',
  template: `
      <div class="control-section">
      <div class="col-lg-9">
        <div class="control_wrapper">
          <ejs-uploader [asyncSettings]='path' #defaultupload id='defaultfileupload' (removing)="onRemove($event)" [dropArea]='dropElement' (change)="onSuccess($event)"></ejs-uploader>
        </div>
        <ejs-grid #grid id='grid'>
        </ejs-grid>
      </div>
    </div>`
})
export class AppComponent {
  @ViewChild('defaultupload') public uploadObj?: UploaderComponent;
  @ViewChild('grid') public gridObj?: GridComponent;
 
  public path: Object = {
    saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
    removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
  };

  public dropElement: HTMLElement = document.getElementsByClassName('control-fluid')[0] as HTMLElement;

  parseExcel(file: any) {
      var reader = new FileReader();
    reader.onload = (e) => {  
      var data = (<any>e.target).result;
      var workbook = XLSX.read(data, { type: 'array' });  
      workbook.SheetNames.forEach((sheetName: any) => {
        var XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
        (this.gridObj as GridComponent).dataSource = XL_row_object;
      });
    };

    reader.readAsArrayBuffer(file.rawFile);
  }
  
  public onSuccess(args: any): void {
    var files = args.file;
    if(files)
     this.parseExcel(files[0]);
  
  }
  public onRemove(args: any): void {
    (this.gridObj as GridComponent).dataSource = [];
  
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, EditService, PageService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule,
        UploaderModule 
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [EditService, PageService, ToolbarService]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);