From 435d491b1074eeb77905edf95754ccd9f9a6c5c3 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Fri, 27 Feb 2026 22:38:07 +0530 Subject: [PATCH] 1012637: Added How to session for react spreadsheet in ug documentation --- Document-Processing-toc.html | 2 + .../how-to/dynamic-dropdown-cell-template.md | 96 +++++++ ...ind-and-replace-text-for-selected-range.md | 33 +++ .../data-validation-dropdown-cs1/app/app.jsx | 66 +++++ .../data-validation-dropdown-cs1/app/app.tsx | 66 +++++ .../app/datasource.ts | 237 ++++++++++++++++++ .../data-validation-dropdown-cs1/index.html | 36 +++ .../systemjs.config.js | 58 +++++ .../dynamic-cell-template-cs1/app/app.jsx | 118 +++++++++ .../dynamic-cell-template-cs1/app/app.tsx | 128 ++++++++++ .../dynamic-cell-template-cs1/index.html | 36 +++ .../systemjs.config.js | 58 +++++ .../react/find-and-replace-cs1/app/app.jsx | 104 ++++++++ .../react/find-and-replace-cs1/app/app.tsx | 102 ++++++++ .../react/find-and-replace-cs1/app/data.ts | 237 ++++++++++++++++++ .../react/find-and-replace-cs1/index.html | 36 +++ .../find-and-replace-cs1/systemjs.config.js | 58 +++++ .../initialize-cell-dropdown-cs1/app/app.jsx | 126 ++++++++++ .../initialize-cell-dropdown-cs1/app/app.tsx | 127 ++++++++++ .../initialize-cell-dropdown-cs1/index.html | 36 +++ .../systemjs.config.js | 58 +++++ 21 files changed, 1818 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/React/how-to/dynamic-dropdown-cell-template.md create mode 100644 Document-Processing/Excel/Spreadsheet/React/how-to/find-and-replace-text-for-selected-range.md create mode 100644 Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/datasource.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/data.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/systemjs.config.js diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 6363de28c6..751ebbb433 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5313,6 +5313,8 @@
  • Create a object structure
  • Changing the active sheet while importing a file
  • Identify the context menu opened
    • +
  • Find and replace the text within the selected range of cells
    • +
  • Add dynamic cell templates in the spreadsheet
  • Mobile Responsiveness
    • diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/dynamic-dropdown-cell-template.md b/Document-Processing/Excel/Spreadsheet/React/how-to/dynamic-dropdown-cell-template.md new file mode 100644 index 0000000000..380c2f3e8c --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/dynamic-dropdown-cell-template.md @@ -0,0 +1,96 @@ +--- +layout: post +title: Dynamic cell templates in the React Spreadsheet component | Syncfusion +description: Learn here all about cell dropdown in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +## Dynamic Cell Template — Dropdown to Input Behavior + +A custom Ribbon tab ("Template" -> "DropDown List") is added via addRibbonTabs in created, enabling a dropdown to be injected into the active cell. + +On click, the code resolves the active cell using getActiveSheet, getCellIndexes, retrieves the cell model/element via getCell, and marks it with template: 'dropdown-list'; + +During beforeCellRender, if cell.template === 'dropdown-list', the cell DOM is cleared and an input element is appended. + +A Syncfusion DropDownList is instantiated on that input with dataSource, placeholder, cssClass, and initial value, and hooked to its change event. + +When a non-"Other" option is chosen, the selection is written back into the sheet using updateCell({ value }) on sheet.activeCell. + +When "Other" is chosen, the dropdown element is located with getComponent(). + +The dropdown is recreated automatically for any cell whose model retains template: 'dropdown-list', ensuring consistent behavior as users navigate. + +Layout helpers like ColumnsDirective configure column widths, while SpreadsheetComponent, SheetsDirective, and SheetDirective provide the Spreadsheet structure. + +The options list (dropdownData) includes "Other" to trigger the switch from templated dropdown to native text entry. + +The following code example shows how to add dropdown from custom template + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1" %} + +## Initialize the dropdown for cells + +This implementation initializes a SpreadsheetComponent and in the created handler sets row height, applies a 'dropdown-list' template to a range using setCell, and calls resize. + +The beforeCellRender event checks each cell's template and injects an ej2-dropdowns DropDownList into the cell DOM when the template equals 'dropdown-list'. + +On selection, dropDownChangeHandler updates the spreadsheet by calling updateCell on the spreadsheetRef, writing the chosen value into the active cell. +Clipboard operations are detected via actionBegin and actionComplete. + +In beforeCellUpdate, pasted cells with the dropdown template are fixed up: if a dropdown component exists it’s updated via getComponent, otherwise addDropDownlist re-renders it. + +The pattern uses a template flag on cells and lazy-mounts the interactive dropdown only when the cell is rendered or updated, keeping the sheet performant and editable. + +The following code example shows how to initialize the dropdown for cells + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1" %} + +## Dynamic Cell Template — In-Cell Dropdown via Data Validation + +The sample adds a dropdown into cells by applying list validation with addDataValidation (using inCellDropDown) inside the onCreated handler. + +It formats headers and columns via cellFormat and numberFormat to prepare the spreadsheet UI. +The cellSave event inspects the edited cell using getCellIndexes, getSheet, getSheetIndex, getCell, and getColumn. + +Validation is detected with the cell's validation property or checkColumnValidation, ensuring list-type rules are honored. + +When the user selects Other, the code removes validation with removeDataValidation, clears the cell using clear, and calls startEdit to allow free-text input. +The spreadsheet instance is accessed via the component ref on SpreadsheetComponent (also configured with openUrl/saveUrl). + +As an alternative to the toolbar demo, you can update the custom cell using updateCell and embed a dropdown directly with addDropDownToCell during any event, avoiding extra UI controls. + +Together these methods implement a dynamic cell template that presents an in-cell dropdown, detects special selections, and swaps to editable mode when needed. + +The following code example shows how the dropdown applied via data validation. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/find-and-replace-text-for-selected-range.md b/Document-Processing/Excel/Spreadsheet/React/how-to/find-and-replace-text-for-selected-range.md new file mode 100644 index 0000000000..da401daa13 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/find-and-replace-text-for-selected-range.md @@ -0,0 +1,33 @@ +--- +layout: post +title: Find and replace the text within the selected range of cells in the React Spreadsheet component | Syncfusion +description: Learn here all about changing the active sheet index while importing a file in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +## Find and replace the text within the selected range of cells + +What it does: Limits “Replace All” so replacements occur only inside the currently selected cells. + +Select a cell range, open Find and Replace, enter Find/Replace values, then choose Replace All. + +How it works: Intercepts the beforeReplaceAll action via [actionBegin](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin), reads getActiveSheet().selectedRange, expands it to cell addresses, and filters eventArgs.addressCollection to match only the selection. + +Key APIs: actionBegin, getActiveSheet().selectedRange, eventArgs.addressCollection, and optional programmatic replace({ value, replaceValue, mode: 'Sheet', isCSen, isEMatch }). + +Only cells in your selection are processed; all others are excluded before the replace runs. + +The following code example shows how to find and replace the text within the selected range of cells + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/find-and-replace-cs1" %} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.jsx new file mode 100644 index 0000000000..1ee0a1813f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.jsx @@ -0,0 +1,66 @@ +import { createRoot } from 'react-dom/client'; +import './index.css'; +import * as React from 'react'; +import { SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective, getColumn, getCellIndexes, getCell, getSheet, getSheetIndex, checkColumnValidation } from '@syncfusion/ej2-react-spreadsheet'; +import { ColumnDirective } from '@syncfusion/ej2-react-spreadsheet'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { defaultData } from './datasource'; + + +function App() { + let spreadsheet; + const onCreated = () => { + // Apply styles to the specified range in the active sheet. + spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1'); + // Apply format to the specified range in the active sheet. + spreadsheet.numberFormat('$#,##0.00', 'F2:F31'); + // The default format code for the date format is 'm/d/yyyy'. + spreadsheet.numberFormat('m/d/yyyy', 'E2:E30'); + spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: 'Option 1,Option 2,Option 3,Other' }, 'A1:A25') + spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, ignoreBlank: true, value1: 'Option 1,Option 2,Option 3,Other' }, 'B:B'); + }; + + const cellSave = (args) => { + let addressArr = args.address.split('!'); + let indexes = getCellIndexes(addressArr[1]); + let sheet = getSheet(spreadsheet, getSheetIndex(spreadsheet,addressArr[0])); + console.log(sheet) + let cell = getCell(indexes[0], indexes[1], sheet); + let column = getColumn(sheet, indexes[1]); + let validation = (cell && cell.validation && cell.validation.type == 'List') || checkColumnValidation(column, indexes[0], indexes[1]); + if (validation && args.value === 'Other') { + // Removing data validation if Other option is selected. + spreadsheet.removeDataValidation(addressArr[1]); + // To clear the cell content. + spreadsheet.clear({ type: 'Clear Contents', range: addressArr[1] }); + // To start editing when other option is selected. + spreadsheet.startEdit(); + } + } + + return (
    +
    + { spreadsheet = ssObj; }} created={onCreated.bind(this)} cellSave={cellSave}> + + + + + + + + + + + + + + + + +
    +
    ); +} +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.tsx new file mode 100644 index 0000000000..479b72ee7d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/app.tsx @@ -0,0 +1,66 @@ +import { createRoot } from 'react-dom/client'; +import './index.css'; +import * as React from 'react'; +import { SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective, getColumn, getCellIndexes, getCell, getSheet, getSheetIndex, checkColumnValidation } from '@syncfusion/ej2-react-spreadsheet'; +import { ColumnDirective } from '@syncfusion/ej2-react-spreadsheet'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { defaultData } from './datasource'; + + +function App(): React.ReactElement { + let spreadsheet: any; + const onCreated = (): void => { + // Apply styles to the specified range in the active sheet. + spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1'); + // Apply format to the specified range in the active sheet. + spreadsheet.numberFormat('$#,##0.00', 'F2:F31'); + // The default format code for the date format is 'm/d/yyyy'. + spreadsheet.numberFormat('m/d/yyyy', 'E2:E30'); + spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: 'Option 1,Option 2,Option 3,Other' }, 'A1:A25') + spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, ignoreBlank: true, value1: 'Option 1,Option 2,Option 3,Other' }, 'B:B'); + }; + + const cellSave = (args: any): void => { + let addressArr = args.address.split('!'); + let indexes = getCellIndexes(addressArr[1]); + let sheet = getSheet(spreadsheet, getSheetIndex(spreadsheet,addressArr[0])); + console.log(sheet) + let cell = getCell(indexes[0], indexes[1], sheet); + let column = getColumn(sheet, indexes[1]); + let validation = (cell && cell.validation && cell.validation.type == 'List') || checkColumnValidation(column, indexes[0], indexes[1]); + if (validation && args.value === 'Other') { + // Removing data validation if Other option is selected. + spreadsheet.removeDataValidation(addressArr[1]); + // To clear the cell content. + spreadsheet.clear({ type: 'Clear Contents', range: addressArr[1] }); + // To start editing when other option is selected. + spreadsheet.startEdit(); + } + } + + return (
    +
    + { spreadsheet = ssObj; }} created={onCreated.bind(undefined as any)} cellSave={cellSave}> + + + + + + + + + + + + + + + + +
    +
    ); +} +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/datasource.ts b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/datasource.ts new file mode 100644 index 0000000000..c06d063a0e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/app/datasource.ts @@ -0,0 +1,237 @@ +// Minimal sample data. You can replace later with your own. +export function getDefaultData(): Array> { + return [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } + ]; +} diff --git a/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/index.html new file mode 100644 index 0000000000..e92c753aa9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/systemjs.config.js new file mode 100644 index 0000000000..3646c46216 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/data-validation-dropdown-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx new file mode 100644 index 0000000000..c612f85cf5 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx @@ -0,0 +1,118 @@ +import React, { useRef } from 'react'; +import { createRoot } from 'react-dom/client'; +import { + SpreadsheetComponent, + SheetsDirective, + SheetDirective, + RangesDirective, + RangeDirective, + ColumnsDirective, + ColumnDirective, + getCellIndexes, + getCell, + setCell, + getRangeAddress +} from '@syncfusion/ej2-react-spreadsheet'; +import {DropDownList} from '@syncfusion/ej2-dropdowns'; +import { getComponent } from '@syncfusion/ej2-base'; + +function App() { + const spreadsheetRef = useRef(null) + + const dropdownData = ['Option 1', 'Option 2', 'Option 3', 'Other']; + + const addDropDownToCell = (data, placeholder, row, col, cellModel, element, selectedValue) => { + var inputEle = document.createElement('input'); + element.appendChild(inputEle); + new DropDownList({ + placeholder: placeholder, + dataSource: data, + cssClass: 'cell-dropdown', + value: selectedValue || null, + change: (event)=>{ + dropDownChangeHandler(event, row, col, element); + } + }, element.firstElementChild); + }; + + const dropDownChangeHandler = (event, row, col, element)=>{ + const sheet = spreadsheetRef.current?.getActiveSheet(); + if (event.value === "Other") { + const dropDownEle = element.querySelector('.cell-dropdown .e-dropdownlist.e-control'); + if (dropDownEle) { + const ddlComp = getComponent(dropDownEle, 'dropdownlist'); + const cell = getCell(row, col, sheet); + if(cell && cell.template) { + delete cell.template; + delete cell.value; + } + ddlComp.destroy(); + dropDownEle.remove(); + + } + } else { + spreadsheetRef.current.updateCell({value: event.value.toString()}, sheet.activeCell); + } + } + + const handleCreated = () => { + const spreadsheet = spreadsheetRef.current; + spreadsheet.addRibbonTabs([{ + header: { text: 'Template' }, content: [{ + text: 'DropDown List', + tooltipText: 'DropDown List', + click: () => { + const spreadsheet = spreadsheetRef.current; + const sheet = spreadsheet.getActiveSheet(); + const [rowIdx, colIdx] = getCellIndexes(sheet.activeCell); + const cellModel = getCell(rowIdx, colIdx, sheet); + const cellEle = spreadsheet.getCell(rowIdx, colIdx); + + if (cellModel && cellModel.template === 'dropdown-list') return; + addDropDownToCell(dropdownData, 'Value', rowIdx, colIdx, cellModel, cellEle); + spreadsheet.updateCell({template: 'dropdown-list'}, sheet.activeCell) + spreadsheet.setRowHeight(40, rowIdx); + } + }] + }]); + }; + + const handleBeforeCellRender = (args) => { + if (args.cell?.template === 'dropdown-list') { + const selectedValue = args.cell.value || ''; + // Clear any previous content — including text and dropdown + if(args.element.firstChild) { + args.element.removeChild(args.element.firstChild); + } + addDropDownToCell(dropdownData, 'Value', args.rowIndex, args.colIndex, args.cell, args.element, selectedValue); + } + }; + + return ( + + + + + + + + + + + + + + + ); +}; + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx new file mode 100644 index 0000000000..6083f694f8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx @@ -0,0 +1,128 @@ +import React, { useRef } from 'react'; +import { createRoot } from 'react-dom/client'; +import { + SpreadsheetComponent, + SheetsDirective, + SheetDirective, + RangesDirective, + RangeDirective, + ColumnsDirective, + ColumnDirective, + getCellIndexes, + getCell, + setCell, + getRangeAddress +} from '@syncfusion/ej2-react-spreadsheet'; +import {DropDownList} from '@syncfusion/ej2-dropdowns'; +import { getComponent } from '@syncfusion/ej2-base'; + +function App(): React.ReactElement { + const spreadsheetRef = useRef(null) + + const dropdownData: string[] = ['Option 1', 'Option 2', 'Option 3', 'Other']; + + const addDropDownToCell = ( + data: string[], + placeholder: string, + row: number, + col: number, + cellModel: any, + element: HTMLElement, + selectedValue?: string + ) => { + var inputEle = document.createElement('input'); + element.appendChild(inputEle); + new DropDownList({ + placeholder: placeholder, + dataSource: data, + cssClass: 'cell-dropdown', + value: selectedValue || null, + change: (event: any)=>{ + dropDownChangeHandler(event, row, col, element); + } + }, element.firstElementChild as any); + }; + + const dropDownChangeHandler = (event: any, row: number, col: number, element: HTMLElement)=>{ + const sheet = spreadsheetRef.current?.getActiveSheet(); + if (event.value === "Other") { + const dropDownEle = element.querySelector('.cell-dropdown .e-dropdownlist.e-control'); + if (dropDownEle) { + const ddlComp = getComponent(dropDownEle as any, 'dropdownlist') as any; + const cell = getCell(row, col, sheet as any); + if(cell && (cell as any).template) { + delete (cell as any).template; + delete (cell as any).value; + } + ddlComp.destroy(); + (dropDownEle as HTMLElement).remove(); + + } + } else { + spreadsheetRef.current?.updateCell({value: event.value.toString()}, (sheet as any).activeCell); + } + } + + const handleCreated = (): void => { + const spreadsheet = spreadsheetRef.current!; + spreadsheet.addRibbonTabs([{ + header: { text: 'Template' }, content: [{ + text: 'DropDown List', + tooltipText: 'DropDown List', + click: () => { + const spreadsheet = spreadsheetRef.current!; + const sheet = spreadsheet.getActiveSheet(); + const [rowIdx, colIdx] = getCellIndexes((sheet as any).activeCell); + const cellModel = getCell(rowIdx, colIdx, sheet as any); + const cellEle = spreadsheet.getCell(rowIdx, colIdx); + + if (cellModel && (cellModel as any).template === 'dropdown-list') return; + addDropDownToCell(dropdownData, 'Value', rowIdx, colIdx, cellModel, cellEle as any); + spreadsheet.updateCell({template: 'dropdown-list'} as any, (sheet as any).activeCell) + spreadsheet.setRowHeight(40, rowIdx); + } + }] + }]); + }; + + const handleBeforeCellRender = (args: any) => { + if (args.cell?.template === 'dropdown-list') { + const selectedValue = args.cell.value || ''; + // Clear any previous content — including text and dropdown + if(args.element.firstChild) { + args.element.removeChild(args.element.firstChild); + } + addDropDownToCell(dropdownData, 'Value', args.rowIndex, args.colIndex, args.cell, args.element, selectedValue); + } + }; + + return ( +
    + + + + + + + + + + + + + + +
    + ); +}; + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/index.html new file mode 100644 index 0000000000..e92c753aa9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/systemjs.config.js new file mode 100644 index 0000000000..3646c46216 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx new file mode 100644 index 0000000000..d2d2a8365e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx @@ -0,0 +1,104 @@ +import * as React from 'react'; +import './App.css'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { getDefaultData } from './data'; + +function App() { + const spreadsheetRef = React.useRef(null); + + const actionBegin = (args) => { + const action = args?.action; + const eventArgs = args?.args?.eventArgs ?? args?.eventArgs; + + // Check the action is beforeReplaceAll. + if (action === 'beforeReplaceAll') { + // Check the mode is Sheet. + if (eventArgs?.mode === 'Sheet') { + const spreadsheet = spreadsheetRef.current; + if (!spreadsheet) return; + + // Get the active sheet's selected range. + const selectedRange = spreadsheet.getActiveSheet()?.selectedRange; + if (!selectedRange) return; + + // Convert the selected range into cell collection. + const selectedRangeCollection = generateCellCollection(selectedRange, spreadsheet); + const replaceAllCollection = eventArgs.addressCollection; + if (!Array.isArray(replaceAllCollection)) return; + + // Create a Set from selectedRangeCollection for efficient lookup. + const selectedSet = new Set(selectedRangeCollection); + const updatedCollection = []; + + // Iterate through replaceAllCollection and keep only cells within selection. + for (const cell of replaceAllCollection) { + if (cell && selectedSet.has(cell)) { + updatedCollection.push(cell); + } else { + // If the cell is not in selectedRangeCollection, add null to the updated collection + updatedCollection.push(null); + } + } + + if (updatedCollection.length > 0) { + // Assign the newly created cell collection to the addressCollection of replaceAll action. + eventArgs.addressCollection = updatedCollection; + } + } + } + }; + + const generateCellCollection = (range, spreadsheet) => { + // Initialize the collection that will hold cell references. + const collection = []; + // Split the range string into start and end cell references. + let [startCell, endCell] = range.split(':'); + endCell = endCell || startCell; + // Get the name of the active sheet. + const activeSheetName = spreadsheet.getActiveSheet()?.name || 'Sheet1'; + + // Extract column and row numbers from start and end cell references. + const [startCol, startRow] = startCell.match(/[A-Z]+|\d+/g) || []; + const [endCol, endRow] = endCell.match(/[A-Z]+|\d+/g) || []; + + // Calculate ASCII codes for start and end columns. + const colRange = [startCol.toUpperCase().charCodeAt(0), endCol.toUpperCase().charCodeAt(0)]; + // Parse start and end row numbers. + const rowRange = [parseInt(startRow, 10), parseInt(endRow, 10)]; + // Iterate over columns and rows within the specified range. + for (let col = colRange[0]; col <= colRange[1]; col++) { + for (let row = rowRange[0]; row <= rowRange[1]; row++) { + // Push each cell reference into the collection array + collection.push(`${activeSheetName}!${String.fromCharCode(col)}${row}`); + } + } + // Return the array of cell references. + return collection; + }; + + return ( + + + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx new file mode 100644 index 0000000000..d232138c6d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx @@ -0,0 +1,102 @@ +import * as React from 'react'; +import './App.css'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { getDefaultData } from './data'; + +function App() { + const spreadsheetRef = React.useRef(null); + + const actionBegin = (args: any): void => { + const action = args?.action; + const eventArgs = args?.args?.eventArgs ?? args?.eventArgs; + + // Check the action is beforeReplaceAll. + if (action === 'beforeReplaceAll') { + // Check the mode is Sheet. + if (eventArgs?.mode === 'Sheet') { + const spreadsheet = spreadsheetRef.current; + if (!spreadsheet) return; + + // Get the active sheet's selected range. + const selectedRange: string | undefined = spreadsheet.getActiveSheet()?.selectedRange; + if (!selectedRange) return; + + // Convert the selected range into cell collection. + const selectedRangeCollection: string[] = generateCellCollection(selectedRange, spreadsheet); + const replaceAllCollection: Array = eventArgs.addressCollection as Array; + if (!Array.isArray(replaceAllCollection)) return; + + // Create a Set from selectedRangeCollection for efficient lookup. + const selectedSet = new Set(selectedRangeCollection); + const updatedCollection: Array = []; + + // Iterate through replaceAllCollection and keep only cells within selection. + for (const cell of replaceAllCollection) { + if (cell && selectedSet.has(cell)) { + updatedCollection.push(cell); + } else { + // If the cell is not in selectedRangeCollection, add null to the updated collection + updatedCollection.push(null); + } + } + + if (updatedCollection.length > 0) { + // Assign the newly created cell collection to the addressCollection of replaceAll action. + eventArgs.addressCollection = updatedCollection; + } + } + } + }; + + const generateCellCollection = (range: string, spreadsheet: SpreadsheetComponent): string[] => { + // Initialize the collection that will hold cell references. + const collection: string[] = []; + // Split the range string into start and end cell references. + let [startCell, endCell]: string[] = range.split(':'); + endCell = endCell || startCell; + // Get the name of the active sheet. + const activeSheetName: string = spreadsheet.getActiveSheet().name!; + + // Extract column and row numbers from start and end cell references. + const [startCol, startRow]: string[] = startCell.match(/[A-Z]+|\d+/g) || []; + const [endCol, endRow]: string[] = endCell.match(/[A-Z]+|\d+/g) || []; + + // Calculate ASCII codes for start and end columns. + const colRange: [number, number] = [startCol.toUpperCase().charCodeAt(0), endCol.toUpperCase().charCodeAt(0)]; + // Parse start and end row numbers. + const rowRange: [number, number] = [parseInt(startRow), parseInt(endRow)]; + // Iterate over columns and rows within the specified range. + for (let col: number = colRange[0]; col <= colRange[1]; col++) { + for (let row: number = rowRange[0]; row <= rowRange[1]; row++) { + // Push each cell reference into the collection array + collection.push(`${activeSheetName}!${String.fromCharCode(col)}${row}`); + } + } + // Return the array of cell references. + return collection; + }; + + return ( + + + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/data.ts b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/data.ts new file mode 100644 index 0000000000..c06d063a0e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/data.ts @@ -0,0 +1,237 @@ +// Minimal sample data. You can replace later with your own. +export function getDefaultData(): Array> { + return [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } + ]; +} diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/index.html new file mode 100644 index 0000000000..e92c753aa9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/systemjs.config.js new file mode 100644 index 0000000000..3646c46216 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.jsx new file mode 100644 index 0000000000..753f01a1bf --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.jsx @@ -0,0 +1,126 @@ +import React, { useRef } from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, setCell} from '@syncfusion/ej2-react-spreadsheet'; +import { DropDownList } from '@syncfusion/ej2-dropdowns'; +import { getComponent } from '@syncfusion/ej2-base' + +function App() { + let spreadsheet; + let isPaste; + const spreadsheetRef = useRef(null); + + const legendOptions = [10,20,30,40,50,60]; + + const onCreated = () => { + spreadsheet = spreadsheetRef.current; + spreadsheet.setRowsHeight(35, ['1:100']); + // Rendering dropdown list for a specific range initially. + const activeSheet = spreadsheet.getActiveSheet(); + for (let rowIdx = 0; rowIdx <= 5; rowIdx++) { + for (let colIdx = 0; colIdx <= 3; colIdx++) { + setCell(rowIdx, colIdx, activeSheet, { template: 'dropdown-list' }, true) + } + } + spreadsheet.resize(); + }; + + + // Triggers before the cell is appended to the DOM. + const beforeCellRender = (args) => { + if (spreadsheet) { + if (args.rowIndex !== undefined && args.colIndex !== undefined) { + // To render dropdown if template property 'dropdown-list' is set. + if (args.cell && args.cell.template === 'dropdown-list') { + addDropDownlist(args.cell, args.element, legendOptions); + } + } + } + } + + // To render the dropdown list. + const addDropDownlist = (cell, element, legendOptions) => { + element.innerHTML = ''; + var inputEle = document.createElement('input'); + element.appendChild(inputEle); + new DropDownList({ + placeholder: 'Select a value', + dataSource: legendOptions, + cssClass: 'e-dropdown-list', + value: cell && cell.value ? cell.value : null, + change: (event) => { + dropDownChangeHandler(event); + } + }, inputEle); + } + + // To handle the change event of dropdown list. + const dropDownChangeHandler = (event) => { + const sheet = spreadsheet.getActiveSheet(); + spreadsheetRef.current.updateCell({ value: event.value.toString() }, sheet.activeCell); + } + + // Triggers before any action begins in the spreadsheet. + const actionBegin = (args) => { + if (args.action === 'clipboard' && args.args.eventArgs.requestType === 'paste') { + isPaste = true; + } + } + + // Triggers before changing any cell properties in the spreadsheet. + const beforeCellUpdate = (args) => { + if (isPaste) { + if (args.cell) { + if (args.cell.template === 'dropdown-list') { + const cellEle = spreadsheet.getCell(args.rowIndex, args.colIndex); + const ddlEle = cellEle.querySelector('.e-dropdownlist.e-control'); + if (ddlEle) { + const ddlComp = getComponent(ddlEle, 'dropdownlist'); + // Updating the value alone if the cell contains the dropdownlist component + ddlComp.value = spreadsheet.getDisplayText(args.cell); + } else { + // To render the dropdown component if the cell does not contain dropdown. + addDropDownlist(args.cell, cellEle, legendOptions) + } + } + } + else { + const cellEle = spreadsheet.getCell(args.rowIndex, args.colIndex); + const ddlEle = cellEle.querySelector('.e-dropdownlist.e-control'); + if (ddlEle) { + cellEle.innerHTML = ''; // To remove the dropdown element from cut cell. + }; + } + } + } + + //Triggers after an action completes in the spreadsheet. + const actionComplete = (args) => { + if (args.action === 'clipboard' && args.eventArgs.requestType === 'paste') { + isPaste = false; + } + } + + return ( + + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.tsx new file mode 100644 index 0000000000..78db40498e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/app/app.tsx @@ -0,0 +1,127 @@ +import { useRef } from 'react'; +import { SpreadsheetComponent, setCell } from '@syncfusion/ej2-react-spreadsheet'; +import { DropDownList } from '@syncfusion/ej2-dropdowns'; +import type { ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; +import { getComponent } from '@syncfusion/ej2-base'; + +function App() { + let spreadsheet: SpreadsheetComponent | null = null; + let isPaste = false; + const spreadsheetRef = useRef(null); + + const legendOptions: number[] = [10, 20, 30, 40, 50, 60]; + + const onCreated = (): void => { + spreadsheet = spreadsheetRef.current; + if (!spreadsheet) return; + spreadsheet.setRowsHeight(35, ['1:100']); + // Rendering dropdown list for a specific range initially. + const activeSheet = spreadsheet.getActiveSheet(); + for (let rowIdx = 0; rowIdx <= 5; rowIdx++) { + for (let colIdx = 0; colIdx <= 3; colIdx++) { + setCell(rowIdx, colIdx, activeSheet as any, { template: 'dropdown-list' } as any, true); + } + } + spreadsheet.resize(); + }; + + + // Triggers before the cell is appended to the DOM. + const beforeCellRender = (args: any): void => { + if (!spreadsheet) return; + if (args.rowIndex !== undefined && args.colIndex !== undefined) { + // To render dropdown if template property 'dropdown-list' is set. + if (args.cell && args.cell.template === 'dropdown-list') { + addDropDownlist(args.cell, args.element as HTMLElement, legendOptions); + } + } + }; + + // To render the dropdown list. + const addDropDownlist = (cell: any, element: HTMLElement, legendOptions: number[]): void => { + element.innerHTML = ''; + const inputEle = document.createElement('input'); + element.appendChild(inputEle); + new DropDownList({ + placeholder: 'Select a value', + dataSource: legendOptions, + cssClass: 'e-dropdown-list', + // Preserve existing value if present + value: cell && cell.value ? (cell.value as any) : null, + change: (event: ChangeEventArgs) => { + dropDownChangeHandler(event); + } + }, inputEle); + }; + + // To handle the change event of dropdown list. + const dropDownChangeHandler = (event: ChangeEventArgs): void => { + if (!spreadsheet || !spreadsheetRef.current) return; + const sheet = spreadsheet.getActiveSheet(); + const value = event.value != null ? String(event.value) : ''; + spreadsheetRef.current.updateCell({ value }, sheet.activeCell as string); + }; + + // Triggers before any action begins in the spreadsheet. + const actionBegin = (args: any): void => { + if (args.action === 'clipboard' && args.args?.eventArgs?.requestType === 'paste') { + isPaste = true; + } + }; + + // Triggers before changing any cell properties in the spreadsheet. + const beforeCellUpdate = (args: any): void => { + if (!isPaste || !spreadsheet) return; + if (args.cell) { + if (args.cell.template === 'dropdown-list') { + const cellEle = spreadsheet.getCell(args.rowIndex, args.colIndex) as HTMLElement; + const ddlEle = cellEle.querySelector('.e-dropdownlist.e-control'); + if (ddlEle) { + const ddlComp = getComponent(ddlEle as any, 'dropdownlist') as DropDownList; + // Updating the value alone if the cell contains the dropdownlist component + ddlComp.value = spreadsheet.getDisplayText(args.cell) as any; + } else { + // To render the dropdown component if the cell does not contain dropdown. + addDropDownlist(args.cell, cellEle, legendOptions) + } + } + } else { + const cellEle = spreadsheet.getCell(args.rowIndex, args.colIndex) as HTMLElement; + const ddlEle = cellEle.querySelector('.e-dropdownlist.e-control'); + if (ddlEle) { + cellEle.innerHTML = ''; // To remove the dropdown element from cut cell. + } + } + }; + + //Triggers after an action completes in the spreadsheet. + const actionComplete = (args: any): void => { + if (args.action === 'clipboard' && args.eventArgs?.requestType === 'paste') { + isPaste = false; + } + }; + + return ( + + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/index.html new file mode 100644 index 0000000000..e92c753aa9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/systemjs.config.js new file mode 100644 index 0000000000..3646c46216 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/initialize-cell-dropdown-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + +