diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 6475d96d8..3da6ba92e 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -4796,6 +4796,7 @@
  • Create a object structure
  • Changing the active sheet while importing a file
  • Identify the context menu opened
    • +
  • Surpass the 255-character limitation for list validation sources
  • Mobile Responsiveness
    • diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/list-validation-source.md b/Document-Processing/Excel/Spreadsheet/React/how-to/list-validation-source.md new file mode 100644 index 000000000..5b3a04228 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/list-validation-source.md @@ -0,0 +1,34 @@ +--- +layout: post +title: Surpassing 255-Character Limit for List Validation Sources in React Spreadsheet Component | Syncfusion +description: Learn how to surpass the 255-character limitation for list validation in React Spreadsheet Component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Surpassing 255-Character Limit for list validation sources in React Spreadsheet Component + + +In the React Spreadsheet component, if you enter a list validation source that exceeds 255 characters, the validation will not be applied to the cell, and further input will be restricted. This behavior is not specific to the Spreadsheet component alone — it also aligns with the behavior of Microsoft Excel as well. You can refer to the following [article](https://support.microsoft.com/en-us/office/excel-specifications-and-limits-1672b34d-7043-467e-8e27-269d656771c3?ui=en-us&rs=en-us&ad=us) to learn more about this limitation. + +To surpass this limitation, you can use a reference to a range of cells as the list validation source instead of providing the values directly. For example: `=Sheet1!B2:B10` or `=Sheet1!$B$2:$B$10`. + +Refer to the following code example to understand how to use a cell range as the list validation source. + +{% tabs %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/list-validation-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/list-validation-cs1/app/datasource.tsx %} +{% endhighlight %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/list-validation-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/list-validation-cs1/app/datasource.jsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/list-validation-cs1" %} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/app.jsx new file mode 100644 index 000000000..df0ce5849 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/app.jsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet'; +import { RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet' +import { defaultData, groupData } 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:B1'); + //Pass the value1 as the reference of cell range to provide more values. + spreadsheet.addDataValidation( + { + type: 'List', + inCellDropDown: true, + value1: '=List Validation source!$B$2:$B$41', + }, + 'B2:B30' + ); + }; + + return ( +
    + { spreadsheet = ssObj; }} created={onCreated.bind(this)}> + + + + + + + + + + + + + + + + + + + + + + + + +
    + ); +}; +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/list-validation-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/app.tsx new file mode 100644 index 000000000..451df142f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/app.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet'; +import { RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet' +import { defaultData, groupData } from './datasource'; + +function App() { + let spreadsheet: any; + const onCreated = () => { + // Apply styles to the specified range in the active sheet. + spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:B1'); + //Pass the value1 as the reference of cell range to provide more values. + spreadsheet.addDataValidation( + { + type: 'List', + inCellDropDown: true, + value1: '=List Validation source!$B$2:$B$41', + }, + 'B2:B30' + ); + }; + + return ( +
    + { spreadsheet = ssObj; }} created={onCreated.bind(this)}> + + + + + + + + + + + + + + + + + + + + + + + + +
    + ); +}; +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); diff --git a/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/datasource.jsx new file mode 100644 index 000000000..e769b5db9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/datasource.jsx @@ -0,0 +1,251 @@ +export const defaultData = [ + { + "Customer Name": "Romona Heaslip" + }, + { + "Customer Name": "Clare Batterton" + }, + { + "Customer Name": "Eamon Traise" + }, + { + "Customer Name": "Julius Gorner" + }, + { + "Customer Name": "Jenna Schoolfield" + }, + { + "Customer Name": "Marylynne Harring" + }, + { + "Customer Name": "Vilhelmina Leipelt" + }, + { + "Customer Name": "Barby Heisler" + }, + { + "Customer Name": "Karyn Boik" + }, + { + "Customer Name": "Jeanette Pamplin" + }, + { + "Customer Name": "Cristi Espinos" + }, + { + "Customer Name": "Issy Humm" + }, + { + "Customer Name": "Tuesday Fautly" + }, + { + "Customer Name": "Rosemaria Thomann" + }, + { + "Customer Name": "Lyell Fuentez" + }, + { + "Customer Name": "Raynell Layne" + }, + { + "Customer Name": "Raye Whines" + }, + { + "Customer Name": "Virgina Aharoni" + }, + { + "Customer Name": "Peta Cheshir" + }, + { + "Customer Name": "Jule Urion" + }, + { + "Customer Name": "Lew Gilyatt" + }, + { + "Customer Name": "Jobey Fortun" + }, + { + "Customer Name": "Blondie Crump" + }, + { + "Customer Name": "Florentia Binns" + }, + { + "Customer Name": "Jaquelin Galtone" + }, + { + "Customer Name": "Hakeem Easseby" + }, + { + "Customer Name": "Nickolaus Gidman" + }, + { + "Customer Name": "Jenine Iglesia" + }, + { + "Customer Name": "Fax Witherspoon" + }]; + +export const groupData = [ + { + "_id": "671ba00c8894a0aae422c787", + "group_name": "grp_1" + }, + { + "_id": "671ba01d8894a0aae422c798", + "group_name": "grp_2" + }, + { + "_id": "671ba0248894a0aae422c79f", + "group_name": "grp_3" + }, + { + "_id": "671ba02a8894a0aae422c7a6", + "group_name": "grp_4" + }, + { + "_id": "671ba02f8894a0aae422c7ad", + "group_name": "grp_5" + }, + { + "_id": "671ba0358894a0aae422c7b4", + "group_name": "grp_6" + }, + { + "_id": "671ba0398894a0aae422c7bb", + "group_name": "grp_7" + }, + { + "_id": "671ba03e8894a0aae422c7c6", + "group_name": "grp_8" + }, + { + "_id": "671ba0428894a0aae422c7cd", + "group_name": "grp_9" + }, + { + "_id": "671ba0498894a0aae422c7d8", + "group_name": "grp_10" + }, + { + "_id": "671ba0518894a0aae422c7e0", + "group_name": "grp_11" + }, + { + "_id": "671ba0568894a0aae422c7e7", + "group_name": "grp_12" + }, + { + "_id": "671ba05d8894a0aae422c7ef", + "group_name": "grp_13" + }, + { + "_id": "671ba0628894a0aae422c7f6", + "group_name": "grp_14" + }, + { + "_id": "671ba0678894a0aae422c800", + "group_name": "grp_15" + }, + { + "_id": "671ba0728894a0aae422c824", + "group_name": "grp_16" + }, + { + "_id": "671ba0788894a0aae422c82d", + "group_name": "grp_17" + }, + { + "_id": "671ba0818894a0aae422c834", + "group_name": "grp_18" + }, + { + "_id": "671ba0868894a0aae422c83b", + "group_name": "grp_19" + }, + { + "_id": "671ba08c8894a0aae422c846", + "group_name": "grp_20" + }, + { + "_id": "671ba0928894a0aae422c853", + "group_name": "grp_21" + }, + { + "_id": "671ba0968894a0aae422c85a", + "group_name": "grp_22" + }, + { + "_id": "671ba09b8894a0aae422c85e", + "group_name": "grp_23" + }, + { + "_id": "671ba0a18894a0aae422c862", + "group_name": "grp_24" + }, + { + "_id": "671ba0a48894a0aae422c866", + "group_name": "grp_25" + }, + { + "_id": "671ba0a88894a0aae422c86a", + "group_name": "grp_26" + }, + { + "_id": "671ba0ab8894a0aae422c86e", + "group_name": "grp_27" + }, + { + "_id": "671ba0b08894a0aae422c872", + "group_name": "grp_28" + }, + { + "_id": "671ba0b58894a0aae422c876", + "group_name": "grp_29" + }, + { + "_id": "671ba0bb8894a0aae422c882", + "group_name": "grp_30" + }, + { + "_id": "671ba0bf8894a0aae422c886", + "group_name": "grp_31" + }, + { + "_id": "671ba0c78894a0aae422c88a", + "group_name": "grp_32" + }, + { + "_id": "671ba0cc8894a0aae422c892", + "group_name": "grp_33" + }, + { + "_id": "671ba0d78894a0aae422c89f", + "group_name": "grp_34" + }, + { + "_id": "671ba0dc8894a0aae422c8a6", + "group_name": "grp_35" + }, + { + "_id": "671ba0eb8894a0aae422c8b8", + "group_name": "grp_36" + }, + { + "_id": "671ba0f68894a0aae422c8c2", + "group_name": "grp_37" + }, + { + "_id": "671ba0fd8894a0aae422c8c9", + "group_name": "grp_38" + }, + { + "_id": "671ba10a8894a0aae422c8d7", + "group_name": "grp_39" + }, + { + "_id": "671ba1128894a0aae422c8df", + "group_name": "grp_40" + } +] \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/datasource.tsx new file mode 100644 index 000000000..2ff40137c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/app/datasource.tsx @@ -0,0 +1,251 @@ +export const defaultData: Object[] = [ + { + "Customer Name": "Romona Heaslip" + }, + { + "Customer Name": "Clare Batterton" + }, + { + "Customer Name": "Eamon Traise" + }, + { + "Customer Name": "Julius Gorner" + }, + { + "Customer Name": "Jenna Schoolfield" + }, + { + "Customer Name": "Marylynne Harring" + }, + { + "Customer Name": "Vilhelmina Leipelt" + }, + { + "Customer Name": "Barby Heisler" + }, + { + "Customer Name": "Karyn Boik" + }, + { + "Customer Name": "Jeanette Pamplin" + }, + { + "Customer Name": "Cristi Espinos" + }, + { + "Customer Name": "Issy Humm" + }, + { + "Customer Name": "Tuesday Fautly" + }, + { + "Customer Name": "Rosemaria Thomann" + }, + { + "Customer Name": "Lyell Fuentez" + }, + { + "Customer Name": "Raynell Layne" + }, + { + "Customer Name": "Raye Whines" + }, + { + "Customer Name": "Virgina Aharoni" + }, + { + "Customer Name": "Peta Cheshir" + }, + { + "Customer Name": "Jule Urion" + }, + { + "Customer Name": "Lew Gilyatt" + }, + { + "Customer Name": "Jobey Fortun" + }, + { + "Customer Name": "Blondie Crump" + }, + { + "Customer Name": "Florentia Binns" + }, + { + "Customer Name": "Jaquelin Galtone" + }, + { + "Customer Name": "Hakeem Easseby" + }, + { + "Customer Name": "Nickolaus Gidman" + }, + { + "Customer Name": "Jenine Iglesia" + }, + { + "Customer Name": "Fax Witherspoon" + }]; + +export const groupData: Object[] = [ + { + "_id": "671ba00c8894a0aae422c787", + "group_name": "grp_1" + }, + { + "_id": "671ba01d8894a0aae422c798", + "group_name": "grp_2" + }, + { + "_id": "671ba0248894a0aae422c79f", + "group_name": "grp_3" + }, + { + "_id": "671ba02a8894a0aae422c7a6", + "group_name": "grp_4" + }, + { + "_id": "671ba02f8894a0aae422c7ad", + "group_name": "grp_5" + }, + { + "_id": "671ba0358894a0aae422c7b4", + "group_name": "grp_6" + }, + { + "_id": "671ba0398894a0aae422c7bb", + "group_name": "grp_7" + }, + { + "_id": "671ba03e8894a0aae422c7c6", + "group_name": "grp_8" + }, + { + "_id": "671ba0428894a0aae422c7cd", + "group_name": "grp_9" + }, + { + "_id": "671ba0498894a0aae422c7d8", + "group_name": "grp_10" + }, + { + "_id": "671ba0518894a0aae422c7e0", + "group_name": "grp_11" + }, + { + "_id": "671ba0568894a0aae422c7e7", + "group_name": "grp_12" + }, + { + "_id": "671ba05d8894a0aae422c7ef", + "group_name": "grp_13" + }, + { + "_id": "671ba0628894a0aae422c7f6", + "group_name": "grp_14" + }, + { + "_id": "671ba0678894a0aae422c800", + "group_name": "grp_15" + }, + { + "_id": "671ba0728894a0aae422c824", + "group_name": "grp_16" + }, + { + "_id": "671ba0788894a0aae422c82d", + "group_name": "grp_17" + }, + { + "_id": "671ba0818894a0aae422c834", + "group_name": "grp_18" + }, + { + "_id": "671ba0868894a0aae422c83b", + "group_name": "grp_19" + }, + { + "_id": "671ba08c8894a0aae422c846", + "group_name": "grp_20" + }, + { + "_id": "671ba0928894a0aae422c853", + "group_name": "grp_21" + }, + { + "_id": "671ba0968894a0aae422c85a", + "group_name": "grp_22" + }, + { + "_id": "671ba09b8894a0aae422c85e", + "group_name": "grp_23" + }, + { + "_id": "671ba0a18894a0aae422c862", + "group_name": "grp_24" + }, + { + "_id": "671ba0a48894a0aae422c866", + "group_name": "grp_25" + }, + { + "_id": "671ba0a88894a0aae422c86a", + "group_name": "grp_26" + }, + { + "_id": "671ba0ab8894a0aae422c86e", + "group_name": "grp_27" + }, + { + "_id": "671ba0b08894a0aae422c872", + "group_name": "grp_28" + }, + { + "_id": "671ba0b58894a0aae422c876", + "group_name": "grp_29" + }, + { + "_id": "671ba0bb8894a0aae422c882", + "group_name": "grp_30" + }, + { + "_id": "671ba0bf8894a0aae422c886", + "group_name": "grp_31" + }, + { + "_id": "671ba0c78894a0aae422c88a", + "group_name": "grp_32" + }, + { + "_id": "671ba0cc8894a0aae422c892", + "group_name": "grp_33" + }, + { + "_id": "671ba0d78894a0aae422c89f", + "group_name": "grp_34" + }, + { + "_id": "671ba0dc8894a0aae422c8a6", + "group_name": "grp_35" + }, + { + "_id": "671ba0eb8894a0aae422c8b8", + "group_name": "grp_36" + }, + { + "_id": "671ba0f68894a0aae422c8c2", + "group_name": "grp_37" + }, + { + "_id": "671ba0fd8894a0aae422c8c9", + "group_name": "grp_38" + }, + { + "_id": "671ba10a8894a0aae422c8d7", + "group_name": "grp_39" + }, + { + "_id": "671ba1128894a0aae422c8df", + "group_name": "grp_40" + } +] diff --git a/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/index.html new file mode 100644 index 000000000..f4693cb2e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/index.html @@ -0,0 +1,37 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/systemjs.config.js new file mode 100644 index 000000000..189e88554 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/list-validation-cs1/systemjs.config.js @@ -0,0 +1,56 @@ +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/31.1.17/" + }, + 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'); + + +