documentation(EJ2-932398): Include the 255-character limitation details for list data validation sources in the UG and include workaround

Document-Processing-toc.html

@@ -4796,6 +4796,7 @@
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure">Create a object structure </a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/list-validation-source">Surpass the 255-character limitation for list validation sources</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>

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" %}

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 (
+        <div>
+            <SpreadsheetComponent openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open'
+                saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' ref={(ssObj) => { spreadsheet = ssObj; }} created={onCreated.bind(this)}>
+                <SheetsDirective>
+                    <SheetDirective name="Car Sales Report">
+                        <RangesDirective>
+                            <RangeDirective dataSource={defaultData}></RangeDirective>
+                        </RangesDirective>
+                        <RowsDirective>
+                            <RowDirective index={0}>
+                                <CellsDirective>
+                                    <CellDirective index={1} value="Group Id"></CellDirective>
+                                </CellsDirective>
+                            </RowDirective>
+                        </RowsDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={180}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                        </ColumnsDirective>
+                    </SheetDirective>
+                    <SheetDirective name="List Validation source">
+                        <RangesDirective>
+                            <RangeDirective dataSource={groupData}></RangeDirective>
+                        </RangesDirective>
+                    </SheetDirective>
+                </SheetsDirective>
+            </SpreadsheetComponent>
+        </div>
+    );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

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 (
+        <div>
+            <SpreadsheetComponent openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open'
+                    saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' ref={(ssObj: any) => { spreadsheet = ssObj; }} created={onCreated.bind(this)}>
+                <SheetsDirective>
+                    <SheetDirective name="Car Sales Report">
+                        <RangesDirective>
+                            <RangeDirective dataSource={defaultData}></RangeDirective>
+                        </RangesDirective>
+                        <RowsDirective>
+                            <RowDirective index={0}>
+                                <CellsDirective>
+                                    <CellDirective index={1} value="Group Id"></CellDirective>
+                                </CellsDirective>
+                            </RowDirective>
+                        </RowsDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={180}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                        </ColumnsDirective>
+                    </SheetDirective>
+                    <SheetDirective name="List Validation source">
+                        <RangesDirective>
+                            <RangeDirective dataSource={groupData}></RangeDirective>
+                        </RangesDirective>
+                    </SheetDirective>
+                </SheetsDirective>
+            </SpreadsheetComponent>
+        </div>
+    );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);