Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
Interface for a class Workbook
EmitType<BeforeCellFormatArgs>
Triggers before the cell format applied to the cell.
<div id='Spreadsheet'></div>new Spreadsheet({
beforeCellFormat: (args: BeforeCellFormatArgs) => {
}
...
}, '#Spreadsheet'); EmitType<BeforeCellUpdateArgs>
Triggers before changing any cell properties.
<div id='Spreadsheet'></div> new Spreadsheet({
beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
}
...
}, '#Spreadsheet');Triggers before opening an Excel file.
<div id='Spreadsheet'></div>new Spreadsheet({
beforeOpen: (args: BeforeOpenEventArgs) => {
}
...
}, '#Spreadsheet');Triggers before saving the Spreadsheet as Excel file.
<div id='Spreadsheet'></div>new Spreadsheet({
beforeSave: (args: BeforeSaveEventArgs) => {
}
...
}, '#Spreadsheet');Triggers when the opened Excel file fails to load.
<div id='Spreadsheet'></div>new Spreadsheet({
openFailure: (args: OpenFailureArgs) => {
}
...
}, '#Spreadsheet');Triggered every time a request is made to access cell information.
<div id='Spreadsheet'></div>new Spreadsheet({
queryCellInfo: (args: CellInfoEventArgs) => {
}
...
}, '#Spreadsheet'); EmitType<SaveCompleteEventArgs>
Triggers after saving the Spreadsheet as Excel file.
<div id='Spreadsheet'></div>new Spreadsheet({
saveComplete: (args: SaveCompleteEventArgs) => {
}
...
}, '#Spreadsheet'); number
Specifies the active sheet index in the workbook.
<div id="spreadsheet"></div>import React from 'react';
import { createRoot } from 'react-dom/client';
import {
SheetDirective,
SheetsDirective,
SpreadsheetComponent,
} from '@syncfusion/ej2-react-spreadsheet';
const App = () => {
return (
/* Set 'Car Stock Report' sheet as active sheet. */
<SpreadsheetComponent activeSheetIndex={1}>
<SheetsDirective>
<SheetDirective name="Car Sales Report" />
<SheetDirective name="Car Stock Report" />
</SheetsDirective>
</SpreadsheetComponent>
);
};
export default App;
const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />); boolean
It allows to enable/disable AutoFill functionalities.
boolean
It allows you to apply styles (font size, font weight, font family, fill color, and more) to the spreadsheet cells.
boolean
It allows you to insert the chart in a spreadsheet.
boolean
It allows you to apply conditional formatting to the sheet.
boolean
It allows you to apply data validation to the spreadsheet cells.
boolean
It allows you to delete rows, columns, and sheets from a spreadsheet.
boolean
It allows you to add new data or update existing cell data. If it is false, it will act as read only mode.
boolean
It allows to enable/disable filter and its functionalities.
boolean
It allows to enable/disable find and replace with its functionalities.
boolean
It allows to enable/disable freeze pane functionality in spreadsheet.
boolean
It allows to enable/disable Hyperlink and its functionalities.
boolean
It allows you to insert the image in a spreadsheet.
boolean
It allows you to insert rows, columns, and sheets into the spreadsheet.
boolean
It allows you to merge the range of cells.
boolean
It allows formatting a raw number into different types of formats (number, currency, accounting, percentage, short date, long date, time, fraction, scientific, and text) with built-in format codes.
boolean
It allows you to open an Excel file (.xlsx, .xls, and .csv) in Spreadsheet.
boolean
Enables or disables the printing functionality in the spreadsheet.
boolean
It allows you to save Spreadsheet with all data as Excel file (.xlsx, .xls, and .csv).
boolean
It allows to enable/disable sort and its functionalities.
Configures the auto fill settings.
The autoFillSettings fillType property has FOUR types and it is described below:
<div id="spreadsheet"></div>import React from 'react';
import { createRoot } from 'react-dom/client';
import {
AutoFillSettingsModel,
SpreadsheetComponent,
} from '@syncfusion/ej2-react-spreadsheet';
const App = () => {
const autoFillSettings: AutoFillSettingsModel = {
fillType: 'CopyCells',
showFillOptions: true,
};
return (
<SpreadsheetComponent
autoFillSettings={autoFillSettings}
/>
);
};
export default App;
const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);The
allowAutoFillproperty should betrue.
Specifies the mode of calculation within the spreadsheet.
Setting the calculation mode to Manual can enhance performance,
particularly when working with multiple sheets at the same time.
Automatic: Calculations are performed automatically whenever a cell value changes.Manual: Calculations are performed only when explicitly triggered, improving performance
when loading or working with large spreadsheets.Specifies the cell style options.
<div id="spreadsheet"></div>import React from 'react';
import { createRoot } from 'react-dom/client';
import {
CellStyleModel,
SpreadsheetComponent,
} from '@syncfusion/ej2-react-spreadsheet';
const App = () => {
const cellStyle: CellStyleModel = {
fontWeight: 'bold',
fontSize: '12pt',
fontStyle: 'italic',
textIndent: '2pt',
backgroundColor: '#4b5366',
color: '#ffffff',
};
return <SpreadsheetComponent cellStyle={cellStyle} />;
};
export default App;
const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);Specifies the name of a range and uses it in a formula for calculation.
<div id="spreadsheet"></div>import React from 'react';
import { createRoot } from 'react-dom/client';
import {
DefineNameModel,
SpreadsheetComponent,
} from '@syncfusion/ej2-react-spreadsheet';
const App = () => {
const definedNames: DefineNameModel[] = [
{ name: 'Group1', refersTo: 'Sheet1!A1:B5' },
];
return (
<SpreadsheetComponent definedNames={definedNames} />
);
};
export default App;
const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />); boolean
Enables or disables the ability to add or show notes in the Spreadsheet. If the property is set to false, the Spreadsheet will not add notes in the cells and the notes in the existing cells will not be visible.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
string | number
Defines the height of the Spreadsheet. It accepts height as pixels, number, and percentage.
<div id="spreadsheet"></div>import React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
const App = () => {
return (
<SpreadsheetComponent
height="600px"
></SpreadsheetComponent>
);
};
export default App;
const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />); boolean
Specifies to protect the workbook.
string
Specifies the list separator which is used as the formula argument separator.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Specifies the options for configuration when opening a document.
<div id="spreadsheet"></div>import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, OpenSettingsModel } from '@syncfusion/ej2-react-spreadsheet';
const App = () => {
const spreadsheetRef = useRef<SpreadsheetComponent>(null);
const openSettings: OpenSettingsModel = {
chunkSize: 100000,
retryCount: 3
};
return (
<SpreadsheetComponent
ref={spreadsheetRef}
openUrl="https://services.syncfusion.com/react/production/api/spreadsheet/open"
saveUrl="https://services.syncfusion.com/react/production/api/spreadsheet/save"
openSettings={openSettings}
/>
);
};
export default App;
const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />); string
Specifies the service URL to open excel file in spreadsheet.
string
Specifies the password.
string
Specifies the service URL to save spreadsheet as Excel file.
Configures sheets and its options.
<div id="spreadsheet"></div>import React from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
SpreadsheetComponent,
SheetsDirective,
SheetDirective,
RangesDirective,
RangeDirective,
RowsDirective,
RowDirective,
CellsDirective,
CellDirective,
ColumnsDirective,
ColumnDirective,
} from '@syncfusion/ej2-react-spreadsheet';
const App = () => {
return (
<SpreadsheetComponent>
<SheetsDirective>
<SheetDirective name="First Sheet">
<RangesDirective>
<RangeDirective dataSource={salesData} />
</RangesDirective>
<RowsDirective>
<RowDirective index={30}>
<CellsDirective>
<CellDirective index={4} value="Total Amount:" />
<CellDirective formula="=SUM(F2:F30)" />
</CellsDirective>
</RowDirective>
</RowsDirective>
</SheetDirective>
<SheetDirective name="Second Sheet">
<ColumnsDirective>
<ColumnDirective width={180} />
<ColumnDirective width={130} />
<ColumnDirective width={130} />
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
);
};
export default App;
const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />); boolean
It shows or hides the formula bar and its features.
boolean
It shows or hides the ribbon in spreadsheet.
boolean
It shows or hides the sheets tabs, this is used to navigate among the sheets and create or delete sheets by UI interaction.
string | number
Defines the width of the Spreadsheet. It accepts width as pixels, number, and percentage.
<div id="spreadsheet"></div>import React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
const App = () => {
return (
<SpreadsheetComponent
/**
* Specifies the width.
*/
width="600px"
/>
);
};
export default App;
const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);