React Working with Commands
The React Spreadsheet component allows you to perform commands for activating different features of the spreadsheet. This topic explains how to perform different operations with the control using commands. Many of the commands will perform their action based on the active cells, rows, or worksheets. For example two such commands are ZoomIn and ZoomOut. See the SpreadsheetAction enum for a full list.
React Working with Commands Example
import { saveAs } from "file-saver" ;
import { Workbook } from "@infragistics/igniteui-react-excel" ;
import { WorkbookFormat } from "@infragistics/igniteui-react-excel" ;
import { WorkbookSaveOptions } from "@infragistics/igniteui-react-excel" ;
import { WorkbookLoadOptions } from "@infragistics/igniteui-react-excel" ;
import { IgrExcelXlsxModule } from "@infragistics/igniteui-react-excel" ;
import { IgrExcelCoreModule } from "@infragistics/igniteui-react-excel" ;
import { IgrExcelModule } from "@infragistics/igniteui-react-excel" ;
IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();
export class ExcelUtility {
public static getExtension(format: WorkbookFormat): string {
switch (format) {
case WorkbookFormat.StrictOpenXml:
case WorkbookFormat.Excel2007:
return ".xlsx" ;
case WorkbookFormat.Excel2007MacroEnabled:
return ".xlsm" ;
case WorkbookFormat.Excel2007MacroEnabledTemplate:
return ".xltm" ;
case WorkbookFormat.Excel2007Template:
return ".xltx" ;
case WorkbookFormat.Excel97To2003:
return ".xls" ;
case WorkbookFormat.Excel97To2003Template:
return ".xlt" ;
}
}
public static load(file: File): Promise <Workbook> {
return new Promise <Workbook>((resolve, reject ) => {
ExcelUtility.readFileAsUint8Array(file).then((a ) => {
Workbook.load(a, new WorkbookLoadOptions(), (w ) => {
resolve(w);
}, (e ) => {
reject(e);
});
}, (e ) => {
reject(e);
});
});
}
public static loadFromUrl(url: string ): Promise <Workbook> {
return new Promise <Workbook>((resolve, reject ) => {
const req = new XMLHttpRequest();
req.open("GET" , url, true );
req.responseType = "arraybuffer" ;
req.onload = (d): void => {
const data = new Uint8Array (req.response);
Workbook.load(data, new WorkbookLoadOptions(), (w ) => {
resolve(w);
}, (e ) => {
reject(e);
});
};
req.send();
});
}
public static save(workbook: Workbook, fileNameWithoutExtension : string ): Promise <string > {
return new Promise <string >((resolve, reject ) => {
const opt = new WorkbookSaveOptions();
opt.type = "blob" ;
workbook.save(opt, (d ) => {
const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
const fileName = fileNameWithoutExtension + fileExt;
saveAs(d as Blob, fileName);
resolve(fileName);
}, (e ) => {
reject(e);
});
});
}
private static readFileAsUint8Array(file: File): Promise <Uint8Array > {
return new Promise <Uint8Array >((resolve, reject ) => {
const fr = new FileReader();
fr.onerror = (e): void => {
reject(fr.error);
};
if (fr.readAsBinaryString) {
fr.onload = (e): void => {
const rs = (fr as any ).resultString;
const str: string = rs != null ? rs : fr.result;
const result = new Uint8Array (str.length);
for (let i = 0 ; i < str.length; i++) {
result[i] = str.charCodeAt(i);
}
resolve(result);
};
fr.readAsBinaryString(file);
} else {
fr.onload = (e): void => {
resolve(new Uint8Array (fr.result as ArrayBuffer ));
};
fr.readAsArrayBuffer(file);
}
});
}
}
ts コピー import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrExcelXlsxModule } from "@infragistics/igniteui-react-excel" ;
import { IgrExcelCoreModule } from "@infragistics/igniteui-react-excel" ;
import { IgrExcelModule } from "@infragistics/igniteui-react-excel" ;
import { IgrSpreadsheetModule } from "@infragistics/igniteui-react-spreadsheet" ;
import { IgrSpreadsheet } from "@infragistics/igniteui-react-spreadsheet" ;
import { ExcelUtility } from './ExcelUtility' ;
import { SpreadsheetAction } from "@infragistics/igniteui-react-spreadsheet" ;
IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();
IgrSpreadsheetModule.register();
export default class SpreadsheetCommands extends React.Component <any, any> {
public spreadsheet: IgrSpreadsheet;
constructor (props: any ) {
super (props);
this .onSpreadsheetRef = this .onSpreadsheetRef.bind(this );
this .onCommandClick = this .onCommandClick.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="options horizontal" >
<button className ="options-button" id ="zoomIn" onClick ={this.onCommandClick} > Zoom In</button >
<button className ="options-button" id ="zoomOut" onClick ={this.onCommandClick} > Zoom Out</button >
</div >
<IgrSpreadsheet ref ={this.onSpreadsheetRef} height ="calc(100% - 25px)" width ="100%" />
</div >
);
}
public onCommandClick(e: any ) {
const id : string = e.target.id;
switch (id) {
case "zoomIn" : {
this .spreadsheet.executeAction(SpreadsheetAction.ZoomIn);
break ;
}
case "zoomOut" : {
this .spreadsheet.executeAction(SpreadsheetAction.ZoomOut);
break ;
}
}
}
public onSpreadsheetRef(spreadsheet: IgrSpreadsheet) {
if (!spreadsheet) { return ; }
this .spreadsheet = spreadsheet;
const url = "https://static.infragistics.com/xplatform/excel/SalesData.xlsx" ;
ExcelUtility.loadFromUrl(url).then((w) => {
this .spreadsheet.workbook = w;
});
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<SpreadsheetCommands /> );
tsx コピー
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Dependencies
Before making use of the commands you will want to import the SpreadsheetAction
import { IgrSpreadsheet } from 'igniteui-react-spreadsheet' ;
import { SpreadsheetAction } from 'igniteui-react-spreadsheet' ;
ts
Usage
The following snippet shows how you can setup the data validation rules
public spreadsheet : IgrSpreadsheet = new IgrSpreadsheet({});
public zoomIn(): void {
this .spreadsheet.executeAction(SpreadsheetAction.ZoomIn);
}
public zoomOut(): void {
this .spreadsheet.executeAction(SpreadsheetAction.ZoomOut);
}
ts
API References
ExecuteAction
SpreadsheetAction