Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 56 additions & 58 deletions Document-Processing/Excel/Spreadsheet/Javascript-ES5/cell-range.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
---
layout: post
title: Cell range in EJ2 Javascript Spreadsheet control | Syncfusion
description: Learn here all about Cell range in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more.
title: Cell range in EJ2 JavaScript Spreadsheet control | Syncfusion
description: Learn here all about Cell range in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Cell range
control: Cell range
documentation: ug
---

# Cell range in EJ2 Javascript Spreadsheet control
# Cell range in EJ2 JavaScript Spreadsheet control

A group of cells in a sheet is known as cell range.
A group of cells in a sheet is known as a cell range.

## Wrap text

Wrap text allows you to display large content as multiple lines in a single cell. By default, the wrap text support is enabled. Use the [`allowWrap`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowwrap) property to enable or disable the wrap text support in spreadsheet.
Wrap text allows you to display large content as multiple lines in a single cell. By default, wrap text support is enabled. Use the [`allowWrap`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowwrap) property to enable or disable wrap text support in the Spreadsheet.

Wrap text can be applied or removed to a cell or range of cells in the following ways,
You can apply wrap text to or remove it from a cell or range of cells in one of the following ways:

* Using the `wrap` property in `cell`, you can enable or disable wrap text to a cell at initial load.
* Select or deselect wrap button from ribbon toolbar to apply or remove the wrap text to the selected range.
* Using the `wrap` property in `cell`, you can enable or disable wrap text on a cell at initial load.
* Select or deselect the wrap button from the ribbon toolbar to apply wrap text to or remove it from the selected range.
* Using the [`wrap`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#wrap) method, you can apply or remove wrap text once the component is loaded.

* Using the [`wrap`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#wrap) method, you can apply or remove the wrap text once the component is loaded.

The following code example shows the wrap text functionality in spreadsheet.
The following code example shows the wrap text functionality in the Spreadsheet.

{% tabs %}
{% highlight js tabtitle="index.js" %}
Expand All @@ -44,15 +43,15 @@ The following features have some limitations in wrap text:

## Merge cells

Merge cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, top-left most cell data will be the data for the merged cell. By default, the merge cells option is enabled. Use [`allowMerge`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowmerge) property to enable or disable the merge cells option in spreadsheet.
Merging cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, the top-leftmost cell data becomes the data for the merged cell. By default, the merge cells option is enabled. Use the [`allowMerge`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowmerge) property to enable or disable the merge cells option in the Spreadsheet.

You can merge the range of cells in the following ways,
You can merge a range of cells in the following ways:

* Set the `rowSpan` and `colSpan` property in `cell` to merge the number of cells at initial load.
* Select the range of cells and apply merge by selecting the desired option from ribbon toolbar.
* Use [`merge`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#merge) method to merge the range of cells, once the component is loaded.
* Set the `rowSpan` and `colSpan` properties in `cell` to merge a specified number of cells at initial load.
* Select the range of cells and apply merge by selecting the desired option from the ribbon toolbar.
* Use the [`merge`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#merge) method to merge the range of cells once the component is loaded.

The available merge options in spreadsheet are,
The available merge options in spreadsheet are:

| Type | Action |
|-------|---------|
Expand All @@ -61,7 +60,7 @@ The available merge options in spreadsheet are,
| Merge Vertically | Combines cells in a range as column-wise. |
| UnMerge | Splits the merged cells into multiple cells. |

The following code example shows the merge cells operation in spreadsheet.
The following code example shows the merge cells operation in the Spreadsheet.

{% tabs %}
{% highlight js tabtitle="index.js" %}
Expand All @@ -76,31 +75,31 @@ The following code example shows the merge cells operation in spreadsheet.

### Limitations of Merge

The following features have some limitations in Merge:
The following features have limitations in Merge:

* Merge with filter.
* Merge with wrap text.

## Data Validation

Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowdatavalidation) property to enable or disable data validation.
> * The default value for `allowDataValidation` property is `true`.
Data Validation is used to restrict the user from entering invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowdatavalidation) property to enable or disable data validation.

> * The default value for the `allowDataValidation` property is `true`.

### Apply Validation

You can apply data validation to restrict the type of data or the values that users enter into a cell.

You can apply data validation by using one of the following ways,
You can apply data validation in using one of the following ways:

* Select the Data tab in the Ribbon toolbar, and then choose the Data Validation item.
* Use the [`addDataValidation()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#adddatavalidation) method programmatically.

### Clear Validation

Clear validation feature is used to remove data validations from the specified ranges or the whole worksheet.
The clear validation feature is used to remove data validations from the specified ranges or the whole worksheet.

You can clear data validation rule by one of the following ways,
You can clear a data validation rule in one of the following ways:

* Select the Data tab in the Ribbon toolbar, and then choose the Clear Validation item.
* Use the [`removeDataValidation()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#removedatavalidation) method programmatically.
Expand All @@ -109,7 +108,7 @@ You can clear data validation rule by one of the following ways,

Highlight invalid data feature is used to highlight the previously entered invalid values.

You can highlight an invalid data by using one of the following ways,
You can highlight invalid data in one of the following ways:

* Select the Data tab in the Ribbon toolbar, and then choose the Highlight Invalid Data item.
* Use the [`addInvalidHighlight()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#addinvalidhighlight) method programmatically.
Expand All @@ -118,7 +117,7 @@ You can highlight an invalid data by using one of the following ways,

Clear highlight feature is used to remove the highlight from invalid cells.

You can clear the highlighted invalid data by using the following ways,
You can clear the highlighted invalid data in the following ways:

* Select the Data tab in the Ribbon toolbar, and then choose the Clear Highlight item.
* Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#removeinvalidhighlight) method programmatically.
Expand All @@ -139,7 +138,7 @@ The Spreadsheet supports custom data validation, allowing users to define their

With custom validation, you can enforce rules using logical expressions or formulas, ensuring that only valid data is entered into the Spreadsheet.

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.
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.

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.

Expand Down Expand Up @@ -172,64 +171,63 @@ The following features have some limitations in Data Validation:

## Auto Fill

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`.
Auto Fill is used to fill cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter repeated data manually. You can use the [`allowAutoFill`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowautofill) property to enable/disable auto fill support. You can also use the [`showFillOptions`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/autoFillSettings/#showfilloptions) property to enable/disable the fill options and the [`fillType`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/autoFillSettings/#filltype) property to change the default auto fill option, both of which are available in [`autoFillSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#autofillsettings).

You can do this by one of the following ways,
You can do this in one of the following ways:

* Using AutoFillOptions menu which is open, while drag and drop the cell using fill handle element.
* Use the autoFill() method programmatically.
* Using the AutoFillOptions menu, which opens when you drag the fill handle of a cell.
* Use the [`autoFill()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#autofill) method programmatically.

The available parameters in `autoFill()` method are,
The available parameters in the `autoFill()` method are:

| Parameter | Type | Description |
|-----|------|----|
| fillRange | `string` | Specifies the fill range. |
| dataRange | `string` | Specifies the data range. |
| direction | `AutoFillDirection` | Specifies the direction("Up","Right","Down","Left")to be filled. |
| fillType | `AutoFillType` | Specifies the fill type("CopyCells","FillSeries","FillFormattingOnly","FillWithoutFormatting") for autofill action. |
| direction | `AutoFillDirection` | Specifies the direction (`Up`, `Right`, `Down`, `Left`) to be filled. |
| fillType | `AutoFillType` | Specifies the fill type (`CopyCells`, `FillSeries`, `FillFormattingOnly`, `FillWithoutFormatting`) for the auto fill action. |


In Auto Fill we have following options,
In Auto Fill, we have the following options:

* Copy Cells
* Fill Series
* Fill Formatting Only
* Fill Without Formatting

>* The default auto fill option is FillSeries which can be referred from `fillType` property.
>* The default auto fill option is `FillSeries` which can be referred from `fillType` property.

### Copy Cells

To copy the selected cell content to the adjacent cells. You can do this by one of the following ways,
To copy the selected cell content to adjacent cells, you can do this in one of the following ways:

* Use the fill handle to select the adjacent cell range and select the `Copy Cells` option in the AutoFillOptions menu to fill the adjacent cells.
* Use `CopyCells` as the fill type in the `autoFill` method to fill the adjacent cells.

* Using fill handle to select the adjacent cell range and “Copy Cells” option in “AutoFillOptions” menu to fill the adjacent cells.
* Using “CopyCells” as fill type in `autoFill` method to fill the adjacent cells.

### Fill Series

To fill the series of numbers, characters, or dates based on selected cell content to the adjacent cells with their formats.
To fill a series of numbers, characters, or dates based on the selected cell content to the adjacent cells with their formats, you can do this in one of the following ways:

You can do this by one of the following ways,
* Use the fill handle to select the adjacent cell range and select the `Fill Series` option in the AutoFillOptions menu to fill the adjacent cells.
* Use `FillSeries` as the fill type in the `autoFill` method to fill the adjacent cells.

* Using fill handle to select the adjacent cell range and “Fill Series” option in “AutoFillOptions” menu to fill the adjacent cells.
* Using “FillSeries” as fill type in `autoFill` method to fill the adjacent cells.

### Fill Formatting Only

To fill the cell style and number formatting based on the selected cell content to the adjacent cells without their content.
To fill the cell style and number formatting based on the selected cell content to the adjacent cells without their content, you can do this in one of the following ways:

You can do this by one of the following ways,
* Use the fill handle to select the adjacent cell range and select the `Fill Formatting Only` option in the AutoFillOptions menu to fill the adjacent cells.
* Use `FillFormattingOnly` as the fill type in the `autoFill` method to fill the adjacent cells.

* Using fill handle to select the adjacent cell range and “Fill Formatting Only” option in “AutoFillOptions” menu to fill the adjacent cells.
* Using “FillFormattingOnly” as fill type in `autoFill` method to fill the adjacent cells.

### Fill Without Formatting

To fill series of numbers, characters, or dates based on the selected cells to the adjacent cells without their formats.
To fill a series of numbers, characters, or dates based on the selected cells to the adjacent cells without their formats, you can do this in one of the following ways:

You can do this by one of the following ways,
* Use the fill handle to select the adjacent cell range and select the `Fill Without Formatting` option in the AutoFillOptions menu to fill the adjacent cells.
* Use `FillWithoutFormatting` as the fill type in the `autoFill` method to fill the adjacent cells.

* Using fill handle to select the adjacent cell range and “Fill Without Formatting” option in “AutoFillOptions” menu to fill the adjacent cells.
* Using “FillWithoutFormatting” as fill type in `autoFill` method to fill the adjacent cells.

In the following sample, you can enable/disable the fill option on the button click event by using the `showFillOptions` property in `autoFillSettings`.

Expand Down Expand Up @@ -257,12 +255,12 @@ Clear feature helps you to clear the cell contents (formulas and data), formats

### Apply Clear Feature

You can apply clear feature by using one of the following ways,
You can apply the clear feature in one of the following ways:

* Select the clear icon in the ribbon toolbar under the Home tab.
* Use the [`clear()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#clear) method to clear the values.

* Select the clear icon in the Ribbon toolbar under the Home Tab.
* Using the [`clear()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#clear) method to clear the values.

Clear has the following types in the spreadsheet,
Clear has the following types in the Spreadsheet:

| Options | Uses |
|-----|------|
Expand Down
Loading