Search results

Templates in React Spreadsheet component

20 Apr 2021 / 4 minutes to read

Cell Template is used for adding HTML elements into Spreadsheet. You can add the cell template in spreadsheet by using the template property and specify the address using the address property inside the ranges property. You can customize the Html elements similar to Syncfusion components (TextBox, DropDownList, RadioButton, MultiSelect, DatePicker etc) by using the beforeCellRender event. In this demo, Cell template is applied to C2:C9 and instantiated with Html input components like TextBox, RadioButton, TextArea. You need to bind the events to perform any operations through HTML elements or Syncfusion components. Here, we have added change event in to the MultiSelect control, and we have updated the selected data into the spreadsheet cell through that change event.

The following code example describes the above behavior.

Source
Preview
app.tsx
datasource.tsx
index.html
app.jsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective, getRangeIndexes, ChangeEventArgs, Row, RowModel} from '@syncfusion/ej2-react-spreadsheet';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { RadioButtonComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import { SelectionSettingsModel } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';

export default class App extends React.Component<{}, {}> {
    public spreadsheet: SpreadsheetComponent;
    public scrollSettings: ScrollSettingsModel = { isFinite: true };
    public selectionSettings: SelectionSettingsModel = { mode: 'None' };
    public boldCenter: CellStyleModel = { fontWeight: 'bold', textAlign: 'center' , fontSize: '12pt', verticalAlign: 'middle',
    textDecoration: 'underline'
};
    public changeEvent(evt: ChangeEventArgs): void {
        let tdElem = evt.element.parentElement;
        let colIndex = tdElem.getAttribute("aria-colindex");
        let rowIndex = tdElem.parentElement.getAttribute("aria-rowindex");
        this.spreadsheetObj.sheets[this.spreadsheetObj.activeSheetIndex].rows[rowIndex].cells[colIndex] = { value: evt.value };
    }

    public nameTextbox(): JSX.Element {
        return (
            <TextBoxComponent placeholder="Name"></TextBoxComponent>
        );
    }

    public dobTextbox(): JSX.Element {
        return (
            <TextBoxComponent placeholder="DOB"></TextBoxComponent>
        );
    }

    public genderRadioButton(): JSX.Element {
        return (
            <div>
                <RadioButtonComponent name="gender" value="male" label="Male"></RadioButtonComponent>
                <RadioButtonComponent  name="gender" value="female" label="Female"></RadioButtonComponent>
            </div>
        );
    }

    public dropDownList(): JSX.Element {
        let experience: string[] =  ['0 - 1 year', '1 - 3 years', '3 - 5 years', '5 - 10 years'];
        return (
            <DropDownListComponent placeholder="Experience" dataSource={experience}></DropDownListComponent>
        );
    }

    public multiSelect(): JSX.Element {
        let languages: string[] = ['JAVA', 'C#', 'SQL'];
        return (
            <MultiSelectComponent placeholder="Areas of Interest" showClearButton={false} dataSource={languages} change= {this.changeEvent.bind(this)}></MultiSelectComponent>
        );
    }

    public mobileNoTextbox(): JSX.Element {
        return (
            <TextBoxComponent placeholder="Mobile Number"></TextBoxComponent>
        );
    }

    public emailTextbox(): JSX.Element {
        return (
            <TextBoxComponent placeholder="Email"></TextBoxComponent>
        );
    }

    public textArea(): JSX.Element {
        return (
            <TextBoxComponent multiline={true}></TextBoxComponent>
        );
    }

    public button(): JSX.Element {
        return (
            <ButtonComponent content="Add" style={{float:"right"}} cssClass="e-flat"></ButtonComponent>
        );
    }

    public onCreated(): void {
        this.spreadsheet.cellFormat({ fontWeight: 'bold' }, 'B2:B9');
        // Merges B1 and C1 cells
        this.spreadsheet.merge('B1:C1');
    }

    render() {
        return (<div>
                    <SpreadsheetComponent showRibbon={false} showFormulaBar= {false} allowOpen= {false} allowSave= {false}
                        ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.onCreated.bind(this)} name= {'Candidates List'}
                        scrollSettings={this.scrollSettings} allowEditing={false} selectionSettings = {this.selectionSettings}>
                        <SheetsDirective>
                            <SheetDirective name='Registration Form' rowCount= {40} colCount= {30} showGridLines= {false}>
                                <RowsDirective>
                                    <RowDirective height= {55}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Interview Registration Form' style={this.boldCenter}></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height= {45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Name:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height= {45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Date of Birth:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height= {45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Gender:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height= {45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Year of Experience:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height= {45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Areas of Interest:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height= {45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Mobile Number:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height= {45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Email:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height= {82}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Address:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                </RowsDirective>
                                <ColumnsDirective>
                                    <ColumnDirective index={1} width={190}></ColumnDirective>
                                    <ColumnDirective width={350}></ColumnDirective>
                                </ColumnsDirective>
                                <RangesDirective>
                                    <RangeDirective template={this.nameTextbox} address='C2'></RangeDirective>
                                    <RangeDirective template={this.dobTextbox} address='C3'></RangeDirective>
                                    <RangeDirective template={this.genderRadioButton} address='C4'></RangeDirective>
                                    <RangeDirective template={this.dropDownList} address='C5'></RangeDirective>
                                    <RangeDirective template={this.multiSelect} address='C6'></RangeDirective>
                                    <RangeDirective template={this.mobileNoTextbox} address='C7'></RangeDirective>
                                    <RangeDirective template={this.emailTextbox} address='C8'></RangeDirective>
                                    <RangeDirective template={this.textArea} address='C9'></RangeDirective>
                                    <RangeDirective template={this.button} address='C11'></RangeDirective>
                                </RangesDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>
                </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
/**
 * Template data source
 */
export let defaultData: Object[] = [
    { 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
    { 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
    { 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
    { 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
    { 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
    { 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
    { 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
    { 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
    { 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
    { 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
                
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { RadioButtonComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.scrollSettings = { isFinite: true };
        this.selectionSettings = { mode: 'None' };
        this.boldCenter = { fontWeight: 'bold', textAlign: 'center', fontSize: '12pt', verticalAlign: 'middle',
            textDecoration: 'underline'
        };
    }
    changeEvent(evt) {
        let tdElem = evt.element.parentElement;
        let colIndex = tdElem.getAttribute("aria-colindex");
        let rowIndex = tdElem.parentElement.getAttribute("aria-rowindex");
        this.spreadsheetObj.sheets[this.spreadsheetObj.activeSheetIndex].rows[rowIndex].cells[colIndex] = { value: evt.value };
    }
    nameTextbox() {
        return (<TextBoxComponent placeholder="Name"></TextBoxComponent>);
    }
    dobTextbox() {
        return (<TextBoxComponent placeholder="DOB"></TextBoxComponent>);
    }
    genderRadioButton() {
        return (<div>
                <RadioButtonComponent name="gender" value="male" label="Male"></RadioButtonComponent>
                <RadioButtonComponent name="gender" value="female" label="Female"></RadioButtonComponent>
            </div>);
    }
    dropDownList() {
        let experience = ['0 - 1 year', '1 - 3 years', '3 - 5 years', '5 - 10 years'];
        return (<DropDownListComponent placeholder="Experience" dataSource={experience}></DropDownListComponent>);
    }
    multiSelect() {
        let languages = ['JAVA', 'C#', 'SQL'];
        return (<MultiSelectComponent placeholder="Areas of Interest" showClearButton={false} dataSource={languages} change={this.changeEvent.bind(this)}></MultiSelectComponent>);
    }
    mobileNoTextbox() {
        return (<TextBoxComponent placeholder="Mobile Number"></TextBoxComponent>);
    }
    emailTextbox() {
        return (<TextBoxComponent placeholder="Email"></TextBoxComponent>);
    }
    textArea() {
        return (<TextBoxComponent multiline={true}></TextBoxComponent>);
    }
    button() {
        return (<ButtonComponent content="Add" style={{ float: "right" }} cssClass="e-flat"></ButtonComponent>);
    }
    onCreated() {
        this.spreadsheet.cellFormat({ fontWeight: 'bold' }, 'B2:B9');
        // Merges B1 and C1 cells
        this.spreadsheet.merge('B1:C1');
    }
    render() {
        return (<div>
                    <SpreadsheetComponent showRibbon={false} showFormulaBar={false} allowOpen={false} allowSave={false} ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.onCreated.bind(this)} name={'Candidates List'} scrollSettings={this.scrollSettings} allowEditing={false} selectionSettings={this.selectionSettings}>
                        <SheetsDirective>
                            <SheetDirective name='Registration Form' rowCount={40} colCount={30} showGridLines={false}>
                                <RowsDirective>
                                    <RowDirective height={55}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Interview Registration Form' style={this.boldCenter}></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height={45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Name:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height={45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Date of Birth:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height={45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Gender:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height={45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Year of Experience:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height={45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Areas of Interest:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height={45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Mobile Number:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height={45}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Email:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                    <RowDirective height={82}>
                                        <CellsDirective>
                                            <CellDirective index={1} value='Address:'></CellDirective>
                                        </CellsDirective>
                                    </RowDirective>
                                </RowsDirective>
                                <ColumnsDirective>
                                    <ColumnDirective index={1} width={190}></ColumnDirective>
                                    <ColumnDirective width={350}></ColumnDirective>
                                </ColumnsDirective>
                                <RangesDirective>
                                    <RangeDirective template={this.nameTextbox} address='C2'></RangeDirective>
                                    <RangeDirective template={this.dobTextbox} address='C3'></RangeDirective>
                                    <RangeDirective template={this.genderRadioButton} address='C4'></RangeDirective>
                                    <RangeDirective template={this.dropDownList} address='C5'></RangeDirective>
                                    <RangeDirective template={this.multiSelect} address='C6'></RangeDirective>
                                    <RangeDirective template={this.mobileNoTextbox} address='C7'></RangeDirective>
                                    <RangeDirective template={this.emailTextbox} address='C8'></RangeDirective>
                                    <RangeDirective template={this.textArea} address='C9'></RangeDirective>
                                    <RangeDirective template={this.button} address='C11'></RangeDirective>
                                </RangesDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>
                </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

See Also