diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index f2bb1774ff..81d5e22b07 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5680,6 +5680,11 @@
  • Create a JSON 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
    • +
  • Add an icon to the cell
    • +
  • Get the filtered row data
    • +
  • paste values without formatting and styles
  • Mobile Responsiveness
    • diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/add-cell-icon.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/add-cell-icon.md new file mode 100644 index 0000000000..89dae66693 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/add-cell-icon.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Add icons in cells in EJ2 TypeScript Spreadsheet component | Syncfusion +description: Learn here all about adding icon inside cells using a custom template in Syncfusion EJ2 TypeScript Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Add Custom Icons to Cells in EJ2 TypeScript Spreadsheet + +In the Syncfusion Spreadsheet, you can render custom icons inside specific cells by defining a custom template property within the cell model. During the [beforeCellRender](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#beforecellrender) event, the icon element can be appended to the corresponding table cell (td) by checking whether the cell contains this template property. + +The following sample demonstrates how to add icons to cells by assigning the template property in the cell definition. Additionally, a custom ribbon item named "Add Icon" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts an icon into the currently active cell. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.js %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/add-dynamic-cell-template.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/add-dynamic-cell-template.md new file mode 100644 index 0000000000..c9a58b093d --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/add-dynamic-cell-template.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Add cell template in EJ2 TypeScript Spreadsheet component | Syncfusion +description: Render dropdown templates inside cells in Syncfusion EJ2 TypeScript Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Create Dynamic Cell Templates in EJ2 TypeScript Spreadsheet + +You can add templates to cells in the Syncfusion Spreadsheet component by dynamically assigning a custom template property directly to individual cells. When a cell has this custom template property, you can use the [beforeCellRender](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#beforecellrender) event to append the desired template element to the cell. + +The following sample demonstrates how to insert a [Syncfusion Dropdown component](https://www.npmjs.com/package/@syncfusion/ej2-dropdowns) into Spreadsheet cells using this custom template property. Additionally, a custom ribbon item named "DropDown List" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts a dropdown into the currently active cell. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.js %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/change-active-sheet.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/change-active-sheet.md index 098fc9b9fc..e8859435ca 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/change-active-sheet.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/change-active-sheet.md @@ -9,7 +9,7 @@ documentation: ug # Changing the active sheet in EJ2 TypeScript Spreadsheet control -You can change the active sheet of imported file by updating [`activeSheetIndex`](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#activesheetindex) property on the [`openComplete`](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#opencomplete) event. +You can change the active sheet of imported file by updating [`activeSheetIndex`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#activesheetindex) property on the [`openComplete`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#opencomplete) event. The following code example shows how to set the active sheet when importing an Excel file. diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/find-replace-in-range.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/find-replace-in-range.md new file mode 100644 index 0000000000..84524e763a --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/find-replace-in-range.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Find and replace in EJ2 TypeScript Spreadsheet component | Syncfusion +description: Learn here all about performing find and replace limited to the range in Syncfusion EJ2 TypeScript 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 + +In Syncfusion Spreadsheet, the "Replace All" action by default searches and replaces a text throughout the entire sheet, regardless of the selected range. To limit "Replace All" to only the selected range, you can customize the addressCollection based on the selectedRange in the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event when the action is `beforeReplaceAll`. + +The following sample demonstrates how to limit the "Replace All" operation to the currently selected range. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.js %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1" %} diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/get-filtered-data.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/get-filtered-data.md new file mode 100644 index 0000000000..8895e2c1aa --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/get-filtered-data.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Filtered row data in EJ2 TypeScript Spreadsheet component | Syncfusion +description: Learn here all about getting filtered row data in Syncfusion EJ2 TypeScript Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Get filtered row data in EJ2 TypeScript Spreadsheet + +Filtering in the Syncfusion Spreadsheet allows you to display only the rows that match your criteria, hiding all others. You can enable filtering by setting the [allowFiltering](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#allowfiltering) property, and apply filters either through the UI or programmatically using the [applyFilter](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#applyfilter) method. To identify which rows are filtered, iterate through the sheet's row collection and check the `isFiltered` property of each row object. This flag indicates whether a row is currently hidden due to filtering. + +The following example shows how to get the filtered rows from the Spreadsheet: + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/spreadsheet/javascript-es6/filter-cs2/index.js %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es6/filter-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/filter-cs2" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/identify-the-context-menu-opened.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/identify-the-context-menu-opened.md index 6bb7771274..0a9128188b 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/identify-the-context-menu-opened.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/identify-the-context-menu-opened.md @@ -11,7 +11,7 @@ documentation: ug The Spreadsheet includes several context menus that will open and display depending on the action. When you right-click on a cell, for example, a context menu with options related to the cell element appears. -The class name returned by the [contextMenuBeforeOpen](https://ej2.syncfusion.com/documentation/api/spreadsheet/#contextmenubeforeopen) event can be used to identify the context menu that is opened. The context menus and their class names are tabulated below. +The class name returned by the [contextMenuBeforeOpen](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#contextmenubeforeopen) event can be used to identify the context menu that is opened. The context menus and their class names are tabulated below. | Class name | Context menu name | |-------|---------| diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/paste-values-without-formatting.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/paste-values-without-formatting.md new file mode 100644 index 0000000000..f96e31d651 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/how-to/paste-values-without-formatting.md @@ -0,0 +1,25 @@ +--- +layout: post +title: Paste only values in EJ2 TypeScript Spreadsheet component | Syncfusion +description: Learn here about Paste only values without formatting in Syncfusion EJ2 TypeScript Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Paste Values Without Formatting in EJ2 TypeScript Spreadsheet + +In the Syncfusion EJ2 TypeScript Spreadsheet, you can make the paste action insert only the raw values into the cells, without bringing any formatting or styles from the copied content. This can be done by using the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event, where the Spreadsheet provides the details of the action being performed. When the action is a clipboard operation, you can set the paste type to Values, ensuring that only plain values are pasted into the sheet. + +The following example shows how to paste values without formatting. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.js %} +{% endhighlight %} +{% highlight ts tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/find-replace-in-range.md b/Document-Processing/Excel/Spreadsheet/React/how-to/find-replace-in-range.md index c5eadc048c..ef4303effa 100644 --- a/Document-Processing/Excel/Spreadsheet/React/how-to/find-replace-in-range.md +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/find-replace-in-range.md @@ -9,7 +9,7 @@ documentation: ug # Find and replace the text within the selected range of cells -In Syncfusion Spreadsheet, the "Replace All" action by default searches and replaces a text throughout the entire sheet, regardless of the selected range. To limit "Replace All" to only the selected range, you can customize the addressCollection based on the selectedRange in the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event when the action is `beforeReplaceAll`. +In Syncfusion Spreadsheet, the "Replace All" action by default searches and replaces a text throughout the entire sheet, regardless of the selected range. To limit "Replace All" to only the selected range, you can customize the addressCollection based on the selectedRange in the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) event when the action is `beforeReplaceAll`. The following sample demonstrates how to limit the "Replace All" operation to the currently selected range. diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.html new file mode 100644 index 0000000000..230a1bb54b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.html @@ -0,0 +1,36 @@ + + + + + EJ2 SpreadSheet + + + + + + + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.js new file mode 100644 index 0000000000..7db220d0f3 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.js @@ -0,0 +1,54 @@ +import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; + +// To create plus icon wrapper. +function createPlusIconWrapper() { + const wrapperDiv = document.createElement("div"); + wrapperDiv.className = 'e-custom-wrapper'; + const iconSpan = document.createElement("span"); + iconSpan.className = 'e-icons e-plus e-custom-icon'; + wrapperDiv.appendChild(iconSpan); + return wrapperDiv; +} + +function handleCreated() { + if (!spreadsheet) return; + spreadsheet.updateCell({ template: 'plus-icon' }, 'A1'); + spreadsheet.updateCell({ template: 'plus-icon' }, 'B1'); + spreadsheet.updateCell({ template: 'plus-icon' }, 'C1'); + spreadsheet.resize(); + spreadsheet.addRibbonTabs([ + { + header: { text: 'Template' }, + content: [ + { + text: 'Add Icon', + tooltipText: 'Initialize', + click: function () { + if (!spreadsheet) return; + var sheet = spreadsheet.getActiveSheet(); + spreadsheet.updateCell( + { template: 'plus-icon' }, + sheet.activeCell + ); + spreadsheet.resize(); + }, + }, + ], + }, + ]); +} + +function handleBeforeCellRender(args) { + if (args.cell && args.cell.template === 'plus-icon') { + const wrapperDiv = createPlusIconWrapper(); + args.element.insertBefore(wrapperDiv, args.element.firstChild); + } +} + +let spreadsheet = new Spreadsheet({ + created: handleCreated, + beforeCellRender: handleBeforeCellRender, +}); + +// Render the initialized Spreadsheet +spreadsheet.appendTo('#spreadsheet'); diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.ts new file mode 100644 index 0000000000..6b01bd51e8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/index.ts @@ -0,0 +1,56 @@ +import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; + +let spreadsheet: Spreadsheet | null = null; + +// To create plus icon wrapper. +function createPlusIconWrapper(): HTMLElement { + const wrapperDiv: HTMLDivElement = document.createElement("div"); + wrapperDiv.className = 'e-custom-wrapper'; + const iconSpan: HTMLSpanElement = document.createElement("span"); + iconSpan.className = 'e-icons e-plus e-custom-icon'; + wrapperDiv.appendChild(iconSpan); + return wrapperDiv; +} + +function handleCreated(): void { + if (!spreadsheet) return; + spreadsheet.updateCell({ template: 'plus-icon' } as any, 'A1'); + spreadsheet.updateCell({ template: 'plus-icon' } as any, 'B1'); + spreadsheet.updateCell({ template: 'plus-icon' } as any, 'C1'); + spreadsheet.resize(); + spreadsheet.addRibbonTabs([ + { + header: { text: 'Template' }, + content: [ + { + text: 'Add Icon', + tooltipText: 'Initialize', + click: () => { + if (!spreadsheet) return; + const sheet: any = spreadsheet.getActiveSheet(); + spreadsheet.updateCell( + { template: 'plus-icon' } as any, + sheet.activeCell + ); + spreadsheet.resize(); + }, + }, + ], + }, + ]); +} + +function handleBeforeCellRender(args: any): void { + if (args.cell && args.cell.template === 'plus-icon') { + const wrapperDiv: HTMLElement = createPlusIconWrapper(); + args.element.insertBefore(wrapperDiv, args.element.firstChild); + } +} + +spreadsheet = new Spreadsheet({ + created: handleCreated, + beforeCellRender: handleBeforeCellRender, +}); + +// Render the initialized Spreadsheet +spreadsheet.appendTo('#spreadsheet'); diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/styles.css b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/styles.css new file mode 100644 index 0000000000..49d610a863 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/styles.css @@ -0,0 +1,15 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +body { + height: 425px; +} diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/system.config.js new file mode 100644 index 0000000000..074c2c1407 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/add-icon-in-cell-cs1/system.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + //Syncfusion packages mapping + "@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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.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-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" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.html new file mode 100644 index 0000000000..230a1bb54b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.html @@ -0,0 +1,36 @@ + + + + + EJ2 SpreadSheet + + + + + + + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.js new file mode 100644 index 0000000000..6bfa7f936b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.js @@ -0,0 +1,93 @@ +// app.ts +import { + Spreadsheet, + CellModel, + BeforeCellRenderEventArgs, + getCellIndexes, + getCell, + setCell +} from '@syncfusion/ej2-spreadsheet'; +import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; + +// Options used in the dropdown +const dropDownOptions = [10, 20, 30, 40, 50, 60]; + +// Helper: render a DropDownList inside a cell element +function addDropDownList(element, options) { + // Clear existing content before injecting the dropdown + element.innerHTML = ''; + + const inputEle = document.createElement('input'); + element.appendChild(inputEle); + + const ddl = new DropDownList({ + placeholder: 'Select a value', + dataSource: options, + cssClass: 'e-dropdown-list', + change: (event) => { + // Update the active cell with the selected value + const activeAddress = (spreadsheet.getActiveSheet()).activeCell; + spreadsheet.updateCell( + { value: String((event).value) }, + activeAddress + ); + } + }); + + ddl.appendTo(inputEle); +} + +// Initialize Spreadsheet +const spreadsheet = new Spreadsheet({ + created: () => { + // Add a custom Ribbon tab to insert a dropdown in the active cell + spreadsheet.addRibbonTabs([ + { + header: { text: 'Template' }, + content: [ + { + text: 'DropDown List', + click: () => { + const sheet = spreadsheet.getActiveSheet(); + const [rowIdx, colIdx] = getCellIndexes(sheet.activeCell); + const cellModel = getCell(rowIdx, colIdx, sheet); + const cellEle = spreadsheet.getCell(rowIdx, colIdx); + + // Prevent re-adding if the template is already set to dropdown + if (cellModel && cellModel.template === 'dropdown-list') return; + + // Directly render the dropdown in the current cell + addDropDownList(cellEle, dropDownOptions); + } + } + ] + } + ]); // Use proper ribbon typings if available in your setup + + // Set row heights + spreadsheet.setRowsHeight(35, ['1:100']); + + // Initially render dropdowns in row 1 for columns A:D + const activeSheet = spreadsheet.getActiveSheet(); + for (let colIdx = 0; colIdx <= 3; colIdx++) { + setCell(0, colIdx, activeSheet, { template: 'dropdown-list' }, true); + } + + spreadsheet.resize(); + }, + + // Render template-driven dropdowns during cell DOM creation + beforeCellRender: (args) => { + const hasCoords = + (args).rowIndex !== undefined && (args).colIndex !== undefined; + if (!hasCoords) return; + + const cell = args.cell & { template: string }; + if (cell && cell.template === 'dropdown-list') { + addDropDownList(args.element, dropDownOptions); + } + } +}); + +// Mount the Spreadsheet to the host element +spreadsheet.appendTo('#spreadsheet'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.ts new file mode 100644 index 0000000000..1850e55971 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/index.ts @@ -0,0 +1,93 @@ +// app.ts +import { + Spreadsheet, + CellModel, + BeforeCellRenderEventArgs, + getCellIndexes, + getCell, + setCell +} from '@syncfusion/ej2-spreadsheet'; +import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; + +// Options used in the dropdown +const dropDownOptions: number[] = [10, 20, 30, 40, 50, 60]; + +// Helper: render a DropDownList inside a cell element +function addDropDownList(element: HTMLElement, options: number[]): void { + // Clear existing content before injecting the dropdown + element.innerHTML = ''; + + const inputEle: HTMLInputElement = document.createElement('input'); + element.appendChild(inputEle); + + const ddl = new DropDownList({ + placeholder: 'Select a value', + dataSource: options, + cssClass: 'e-dropdown-list', + change: (event: ChangeEventArgs): void => { + // Update the active cell with the selected value + const activeAddress: string = (spreadsheet.getActiveSheet() as any).activeCell; + spreadsheet.updateCell( + { value: String((event as any).value) } as CellModel, + activeAddress + ); + } + }); + + ddl.appendTo(inputEle); +} + +// Initialize Spreadsheet +const spreadsheet: Spreadsheet = new Spreadsheet({ + created: (): void => { + // Add a custom Ribbon tab to insert a dropdown in the active cell + spreadsheet.addRibbonTabs([ + { + header: { text: 'Template' }, + content: [ + { + text: 'DropDown List', + click: (): void => { + const sheet: any = spreadsheet.getActiveSheet(); + const [rowIdx, colIdx]: number[] = getCellIndexes(sheet.activeCell); + const cellModel: any = getCell(rowIdx, colIdx, sheet); + const cellEle: HTMLElement = spreadsheet.getCell(rowIdx, colIdx) as HTMLElement; + + // Prevent re-adding if the template is already set to dropdown + if (cellModel && cellModel.template === 'dropdown-list') return; + + // Directly render the dropdown in the current cell + addDropDownList(cellEle, dropDownOptions); + } + } + ] + } + ] as any); // Use proper ribbon typings if available in your setup + + // Set row heights + spreadsheet.setRowsHeight(35, ['1:100']); + + // Initially render dropdowns in row 1 for columns A:D + const activeSheet: any = spreadsheet.getActiveSheet(); + for (let colIdx = 0; colIdx <= 3; colIdx++) { + setCell(0, colIdx, activeSheet, { template: 'dropdown-list' } as any, true); + } + + spreadsheet.resize(); + }, + + // Render template-driven dropdowns during cell DOM creation + beforeCellRender: (args: BeforeCellRenderEventArgs): void => { + const hasCoords = + (args as any).rowIndex !== undefined && (args as any).colIndex !== undefined; + if (!hasCoords) return; + + const cell = args.cell as CellModel & { template?: string }; + if (cell && cell.template === 'dropdown-list') { + addDropDownList(args.element as HTMLElement, dropDownOptions); + } + } +}); + +// Mount the Spreadsheet to the host element +spreadsheet.appendTo('#spreadsheet'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/styles.css b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/styles.css new file mode 100644 index 0000000000..49d610a863 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/styles.css @@ -0,0 +1,15 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +body { + height: 425px; +} diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/system.config.js new file mode 100644 index 0000000000..074c2c1407 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/dynamic-cell-template-cs1/system.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + //Syncfusion packages mapping + "@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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.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-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" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/datasource.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/datasource.ts new file mode 100644 index 0000000000..9b62ca3420 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/datasource.ts @@ -0,0 +1,235 @@ + +export let getDefaultData: Object[] = [ + { + "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" + } +]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/es5-datasource.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/es5-datasource.js new file mode 100644 index 0000000000..af89ea0018 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/es5-datasource.js @@ -0,0 +1,235 @@ + +let getDefaultData = [ + { + "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/javascript-es6/find-and-replace-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.html new file mode 100644 index 0000000000..230a1bb54b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.html @@ -0,0 +1,36 @@ + + + + + EJ2 SpreadSheet + + + + + + + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.js new file mode 100644 index 0000000000..1cd22434b5 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.js @@ -0,0 +1,90 @@ +// app.ts +import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; +import { getDefaultData } from './datasource.ts'; + +function generateCellCollection(range, spreadsheet) { + const collection = []; + + // Split into start / end (if only one cell, endCell = startCell) + let [startCell, endCell] = range.split(':'); + endCell = endCell || startCell; + + const sheetName = spreadsheet.getActiveSheet().name; + + // Extract column+row parts + const [startCol, startRow] = startCell.match(/[A-Z]+|\d+/g) || []; + const [endCol, endRow] = endCell.match(/[A-Z]+|\d+/g) || []; + + // Convert columns to ASCII for looping + const colRange = [ + startCol.toUpperCase().charCodeAt(0), + endCol.toUpperCase().charCodeAt(0) + ]; + + const rowRange = [ + parseInt(startRow), + parseInt(endRow) + ]; + + // Build full sheet‑qualified cell list + for (let col = colRange[0]; col <= colRange[1]; col++) { + for (let row = rowRange[0]; row <= rowRange[1]; row++) { + collection.push(`${sheetName}!${String.fromCharCode(col)}${row}`); + } + } + return collection; +} + +const spreadsheet = new Spreadsheet({ + sheets: [ + { + name: 'Sheet1', + ranges: [ + { + dataSource: getDefaultData, + startCell: 'A1' + } + ] + } + ], + + // Equivalent of React's `actionBegin` + actionBegin: (args) => { + const action = args.action; + const eventArgs = args.args && args.args.eventArgs; + + if (action === 'beforeReplaceAll') { + // Selected range from active sheet + const selectedRange = spreadsheet.getActiveSheet().selectedRange; + + if (!selectedRange || !eventArgs) return; + + const selectedRangeCollection = generateCellCollection( + selectedRange, + spreadsheet + ); + + const replaceAllCollection = eventArgs.addressCollection; + + if (!Array.isArray(replaceAllCollection)) return; + + // Fast lookup using Set + const selectedSet = new Set(selectedRangeCollection); + const updatedCollection = []; + + for (const cell of replaceAllCollection) { + if (cell && selectedSet.has(cell)) { + updatedCollection.push(cell); + } else { + updatedCollection.push(null); + } + } + + if (updatedCollection.length > 0) { + eventArgs.addressCollection = updatedCollection; + } + } + } +}); + +spreadsheet.appendTo('#spreadsheet'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.ts new file mode 100644 index 0000000000..fa9c503b1a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/index.ts @@ -0,0 +1,96 @@ +// app.ts +import { + Spreadsheet, + ActionEventArgs, + CellModel +} from '@syncfusion/ej2-spreadsheet'; +import { getDefaultData } from './datasource.ts'; + +function generateCellCollection(range: string, spreadsheet: Spreadsheet): string[] { + const collection: string[] = []; + + // Split into start / end (if only one cell, endCell = startCell) + let [startCell, endCell] = range.split(':'); + endCell = endCell || startCell; + + const sheetName = spreadsheet.getActiveSheet().name!; + + // Extract column+row parts + const [startCol, startRow] = startCell.match(/[A-Z]+|\d+/g) || []; + const [endCol, endRow] = endCell.match(/[A-Z]+|\d+/g) || []; + + // Convert columns to ASCII for looping + const colRange: [number, number] = [ + startCol!.toUpperCase().charCodeAt(0), + endCol!.toUpperCase().charCodeAt(0) + ]; + + const rowRange: [number, number] = [ + parseInt(startRow), + parseInt(endRow) + ]; + + // Build full sheet‑qualified cell list + for (let col = colRange[0]; col <= colRange[1]; col++) { + for (let row = rowRange[0]; row <= rowRange[1]; row++) { + collection.push(`${sheetName}!${String.fromCharCode(col)}${row}`); + } + } + return collection; +} + +const spreadsheet: Spreadsheet = new Spreadsheet({ + sheets: [ + { + name: 'Sheet1', + ranges: [ + { + dataSource: getDefaultData, + startCell: 'A1' + } + ] + } + ], + + // Equivalent of React's `actionBegin` + actionBegin: (args: ActionEventArgs): void => { + const action = args.action; + const eventArgs: any = (args as any).args.eventArgs; + + if (action === 'beforeReplaceAll') { + // Selected range from active sheet + const selectedRange: string | undefined = + spreadsheet.getActiveSheet().selectedRange; + + if (!selectedRange || !eventArgs) return; + + const selectedRangeCollection = generateCellCollection( + selectedRange, + spreadsheet + ); + + const replaceAllCollection: Array = + eventArgs.addressCollection; + + if (!Array.isArray(replaceAllCollection)) return; + + // Fast lookup using Set + const selectedSet = new Set(selectedRangeCollection); + const updatedCollection: Array = []; + + for (const cell of replaceAllCollection) { + if (cell && selectedSet.has(cell)) { + updatedCollection.push(cell); + } else { + updatedCollection.push(null); + } + } + + if (updatedCollection.length > 0) { + eventArgs.addressCollection = updatedCollection; + } + } + } +}); + +spreadsheet.appendTo('#spreadsheet'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/styles.css b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/styles.css new file mode 100644 index 0000000000..17a1235f8e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/styles.css @@ -0,0 +1,18 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +body { + height: 425px; +} +.custom-btn { + margin: 0 0 10px 0; +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/system.config.js new file mode 100644 index 0000000000..3c81b08886 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/find-and-replace-cs1/system.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/24.1.41/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + //Syncfusion packages mapping + "@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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.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-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" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/datasource.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/datasource.ts new file mode 100644 index 0000000000..9b62ca3420 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/datasource.ts @@ -0,0 +1,235 @@ + +export let getDefaultData: Object[] = [ + { + "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" + } +]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/es5-datasource.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/es5-datasource.js new file mode 100644 index 0000000000..af89ea0018 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/es5-datasource.js @@ -0,0 +1,235 @@ + +let getDefaultData = [ + { + "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/javascript-es6/paste-values-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.html new file mode 100644 index 0000000000..230a1bb54b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.html @@ -0,0 +1,36 @@ + + + + + EJ2 SpreadSheet + + + + + + + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.js new file mode 100644 index 0000000000..bfb784288f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.js @@ -0,0 +1,29 @@ +// app.ts +import { Spreadsheet, ActionEventArgs } from '@syncfusion/ej2-spreadsheet'; +import { getDefaultData } from './datasource.ts'; + +// Initialize Spreadsheet +const spreadsheet = new Spreadsheet({ + sheets: [ + { + name: 'Sheet1', + ranges: [ + { + dataSource: getDefaultData, + startCell: 'A1' + } + ] + } + ], + + // Equivalent of React actionBegin + actionBegin: (args) => { + // When user pastes: force paste type to "Values" + if (args.action === 'clipboard') { + args.args.eventArgs.type = 'Values'; + } + } +}); + +// Mount Spreadsheet instance to host element +spreadsheet.appendTo('#spreadsheet'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.ts new file mode 100644 index 0000000000..b746897fac --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/index.ts @@ -0,0 +1,29 @@ +// app.ts +import { Spreadsheet, ActionEventArgs } from '@syncfusion/ej2-spreadsheet'; +import { getDefaultData } from './datasource.ts'; + +// Initialize Spreadsheet +const spreadsheet: Spreadsheet = new Spreadsheet({ + sheets: [ + { + name: 'Sheet1', + ranges: [ + { + dataSource: getDefaultData, + startCell: 'A1' + } + ] + } + ], + + // Equivalent of React actionBegin + actionBegin: (args: ActionEventArgs): void => { + // When user pastes: force paste type to "Values" + if (args.action === 'clipboard') { + (args as any).args.eventArgs.type = 'Values'; + } + } +}); + +// Mount Spreadsheet instance to host element +spreadsheet.appendTo('#spreadsheet'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/styles.css b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/styles.css new file mode 100644 index 0000000000..17a1235f8e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/styles.css @@ -0,0 +1,18 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +body { + height: 425px; +} +.custom-btn { + margin: 0 0 10px 0; +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/system.config.js new file mode 100644 index 0000000000..3c81b08886 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/paste-values-cs1/system.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/24.1.41/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + //Syncfusion packages mapping + "@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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.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-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" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file