Skip to content

Commit 7e3c5e9

Browse files
parthasarathy4998parthasarathy4998
committed
1004162: Updated Data validation as separate page
1 parent 52111ba commit 7e3c5e9

3 files changed

Lines changed: 107 additions & 90 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5240,6 +5240,7 @@
52405240
<li><a href="/document-processing/excel/spreadsheet/react/editing">Editing</a></li>
52415241
<li><a href="/document-processing/excel/spreadsheet/react/context-menu">Context Menu</a></li>
52425242
<li><a href="/document-processing/excel/spreadsheet/react/formulas">Formulas</a></li>
5243+
<li><a href="/document-processing/excel/spreadsheet/react/data-validation">Data Validation</a></li>
52435244
<li><a href="/document-processing/excel/spreadsheet/react/formatting">Formatting</a></li>
52445245
<li><a href="/document-processing/excel/spreadsheet/react/illustrations">Illustrations</a></li>
52455246
<li><a href="/document-processing/excel/spreadsheet/react/rows-and-columns">Rows and Columns</a></li>

‎Document-Processing/Excel/Spreadsheet/React/cell-range.md‎

Lines changed: 0 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -96,96 +96,6 @@ The following features have some limitations in Merge:
9696
* Merge with filter.
9797
* Merge with wrap text.
9898

99-
## Data Validation
100-
101-
Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowdatavalidation) property to enable or disable data validation.
102-
103-
> * The default value for `allowDataValidation` property is `true`.
104-
105-
### Apply Validation
106-
107-
You can apply data validation to restrict the type of data or the values that users enter into a cell.
108-
109-
You can apply data validation by using one of the following ways,
110-
111-
* Select the Data tab in the Ribbon toolbar, and then choose the Data Validation item.
112-
* Use the [`addDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#adddatavalidation) method programmatically.
113-
114-
### Clear Validation
115-
116-
Clear validation feature is used to remove data validations from the specified ranges or the whole worksheet.
117-
118-
You can clear data validation rule by one of the following ways,
119-
120-
* Select the Data tab in the Ribbon toolbar, and then choose the Clear Validation item.
121-
* Use the [`removeDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#removedatavalidation) method programmatically.
122-
123-
### Highlight Invalid Data
124-
125-
Highlight invalid data feature is used to highlight the previously entered invalid values.
126-
127-
You can highlight an invalid data by using one of the following ways,
128-
129-
* Select the Data tab in the Ribbon toolbar, and then choose the Highlight Invalid Data item.
130-
* Use the [`addInvalidHighlight()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addinvalidhighlight) method programmatically.
131-
132-
### Clear Highlighted Invalid Data
133-
134-
Clear highlight feature is used to remove the highlight from invalid cells.
135-
136-
You can clear the highlighted invalid data by using the following ways,
137-
138-
* Select the Data tab in the Ribbon toolbar, and then choose the Clear Highlight item.
139-
* Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#removeinvalidhighlight) method programmatically.
140-
141-
{% tabs %}
142-
{% highlight js tabtitle="app.jsx" %}
143-
{% include code-snippet/spreadsheet/react/data-validation-cs1/app/app.jsx %}
144-
{% endhighlight %}
145-
{% highlight ts tabtitle="app.tsx" %}
146-
{% include code-snippet/spreadsheet/react/data-validation-cs1/app/app.tsx %}
147-
{% endhighlight %}
148-
{% endtabs %}
149-
150-
{% previewsample "/document-processing/code-snippet/spreadsheet/react/data-validation-cs1" %}
151-
152-
### Custom Data validation
153-
154-
The Spreadsheet supports custom data validation, allowing users to define their own validation rules for specific cells or ranges. This feature enables you to set conditions that the entered data must meet, making it particularly useful when predefined validation options, such as numbers, dates, or lists, are insufficient.
155-
156-
With custom validation, you can enforce rules using logical expressions or formulas, ensuring that only valid data is entered into the Spreadsheet.
157-
158-
For example, consider a scenario where you want to ensure that a cell contains a number between 10 and 100. To achieve this, define a validation rule using a formula that checks if the entered value is greater than 10 and less than 100. The formula for this validation is =AND(A1>10, A1<100), where A1 refers to the cell being validated.
159-
160-
When this rule is applied, the Spreadsheet evaluates the entered value against the formula. If a user enters a value outside the specified range, an alert notifies them of the invalid input. This helps users correct errors efficiently and ensures that only desired values are accepted.
161-
162-
You can apply custom data validation using two methods.
163-
164-
* The first is through the Data Validation dialog in the Ribbon toolbar. Navigate to the Data tab, select the Data Validation option, and choose the Custom type from the Allow dropdown menu.
165-
* The second method is programmatically, using the [`addDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#adddatavalidation) method, which allows developers to set custom rules dynamically via code.
166-
167-
The following code example demonstrates how to add custom data validation with a formula in a Spreadsheet.
168-
169-
{% tabs %}
170-
{% highlight js tabtitle="app.jsx" %}
171-
{% include code-snippet/spreadsheet/react/data-validation-cs2/app/app.jsx %}
172-
{% endhighlight %}
173-
{% highlight ts tabtitle="app.tsx" %}
174-
{% include code-snippet/spreadsheet/react/data-validation-cs2/app/app.tsx %}
175-
{% endhighlight %}
176-
{% endtabs %}
177-
178-
{% previewsample "/document-processing/code-snippet/spreadsheet/react/data-validation-cs2" %}
179-
180-
### Limitations of Data validation
181-
182-
The following features have some limitations in Data Validation:
183-
184-
* Entire row data validation.
185-
* Insert row between the data validation.
186-
* Copy/paste with data validation.
187-
* Delete cells between data validation applied range.
188-
18999
## Auto Fill
190100

191101
Auto Fill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use `allowAutoFill` property to enable/disable the auto fill support. You can also use `showFillOptions` property to enable/disable the fill option and `fillType` property to change the default auto fill option which is available in `autoFillSettings`.

‎Document-Processing/Excel/Spreadsheet/React/data-validation.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
layout: post
3+
title: Data validation in EJ2 React Spreadsheet control | Syncfusion
4+
description: Learn here all about Data validation in Syncfusion EJ2 React Spreadsheet control of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: Data validation
7+
documentation: ug
8+
---
9+
10+
# Data validation in EJ2 React Spreadsheet control
11+
12+
13+
Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowdatavalidation) property to enable or disable data validation.
14+
15+
> * The default value for `allowDataValidation` property is `true`.
16+
17+
## Apply Validation
18+
19+
You can apply data validation to restrict the type of data or the values that users enter into a cell.
20+
21+
You can apply data validation by using one of the following ways,
22+
23+
* Select the Data tab in the Ribbon toolbar, and then choose the Data Validation item.
24+
* Use the [`addDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#adddatavalidation) method programmatically.
25+
26+
## Clear Validation
27+
28+
Clear validation feature is used to remove data validations from the specified ranges or the whole worksheet.
29+
30+
You can clear data validation rule by one of the following ways,
31+
32+
* Select the Data tab in the Ribbon toolbar, and then choose the Clear Validation item.
33+
* Use the [`removeDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#removedatavalidation) method programmatically.
34+
35+
## Highlight Invalid Data
36+
37+
Highlight invalid data feature is used to highlight the previously entered invalid values.
38+
39+
You can highlight an invalid data by using one of the following ways,
40+
41+
* Select the Data tab in the Ribbon toolbar, and then choose the Highlight Invalid Data item.
42+
* Use the [`addInvalidHighlight()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#addinvalidhighlight) method programmatically.
43+
44+
## Clear Highlighted Invalid Data
45+
46+
Clear highlight feature is used to remove the highlight from invalid cells.
47+
48+
You can clear the highlighted invalid data by using the following ways,
49+
50+
* Select the Data tab in the Ribbon toolbar, and then choose the Clear Highlight item.
51+
* Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#removeinvalidhighlight) method programmatically.
52+
53+
{% tabs %}
54+
{% highlight js tabtitle="app.jsx" %}
55+
{% include code-snippet/spreadsheet/react/data-validation-cs1/app/app.jsx %}
56+
{% endhighlight %}
57+
{% highlight ts tabtitle="app.tsx" %}
58+
{% include code-snippet/spreadsheet/react/data-validation-cs1/app/app.tsx %}
59+
{% endhighlight %}
60+
{% endtabs %}
61+
62+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/data-validation-cs1" %}
63+
64+
## Custom Data validation
65+
66+
The Spreadsheet supports custom data validation, allowing users to define their own validation rules for specific cells or ranges. This feature enables you to set conditions that the entered data must meet, making it particularly useful when predefined validation options, such as numbers, dates, or lists, are insufficient.
67+
68+
With custom validation, you can enforce rules using logical expressions or formulas, ensuring that only valid data is entered into the Spreadsheet.
69+
70+
For example, consider a scenario where you want to ensure that a cell contains a number between 10 and 100. To achieve this, define a validation rule using a formula that checks if the entered value is greater than 10 and less than 100. The formula for this validation is =AND(A1>10, A1<100), where A1 refers to the cell being validated.
71+
72+
When this rule is applied, the Spreadsheet evaluates the entered value against the formula. If a user enters a value outside the specified range, an alert notifies them of the invalid input. This helps users correct errors efficiently and ensures that only desired values are accepted.
73+
74+
You can apply custom data validation using two methods.
75+
76+
* The first is through the Data Validation dialog in the Ribbon toolbar. Navigate to the Data tab, select the Data Validation option, and choose the Custom type from the Allow dropdown menu.
77+
* The second method is programmatically, using the [`addDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#adddatavalidation) method, which allows developers to set custom rules dynamically via code.
78+
79+
The following code example demonstrates how to add custom data validation with a formula in a Spreadsheet.
80+
81+
{% tabs %}
82+
{% highlight js tabtitle="app.jsx" %}
83+
{% include code-snippet/spreadsheet/react/data-validation-cs2/app/app.jsx %}
84+
{% endhighlight %}
85+
{% highlight ts tabtitle="app.tsx" %}
86+
{% include code-snippet/spreadsheet/react/data-validation-cs2/app/app.tsx %}
87+
{% endhighlight %}
88+
{% endtabs %}
89+
90+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/data-validation-cs2" %}
91+
92+
## Limitations of Data validation
93+
94+
The following features have some limitations in Data Validation:
95+
96+
* Entire row data validation.
97+
* Insert row between the data validation.
98+
* Copy/paste with data validation.
99+
* Delete cells between data validation applied range.
100+
101+
## See Also
102+
103+
* [Formatting](./formatting)
104+
* [Rows and columns](./rows-and-columns)
105+
* [Hyperlink](./link)
106+
* [Sorting](./sort)

0 commit comments

Comments
 (0)