| layout | post |
|---|---|
| title | Autofill in Angular Spreadsheet component | Syncfusion |
| description | Learn here how to apply autofill to a range of cells in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. |
| control | Spreadsheet |
| platform | document-processing |
| documentation | ug |
Autofill 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 autofill support. You can also use showFillOptions property to enable/disable the fill option and fillType property to change the default autofill option which is available in autoFillSettings.
You can do this by 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.
The available parameters in 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. |
In autofill we have following options,
- Copy Cells
- Fill Series
- Fill Formatting Only
- Fill Without Formatting
- The default autofill option is “FillSeries” which can be referred from
fillTypeproperty.
To copy the selected cell content to the adjacent cells. You can do this by one of the following ways,
- 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
autoFillmethod to fill the adjacent cells.
To fill the series of numbers, characters, or dates based on selected cell content to the adjacent cells with their formats.
You can do this by one of the following ways,
- 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
autoFillmethod to fill the adjacent cells.
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 by one of the following ways,
- 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
autoFillmethod to fill the adjacent cells.
To fill series of numbers, characters, or dates based on the selected cells to the adjacent cells without their formats.
You can do this by one of the following ways,
- 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
autoFillmethod 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.
{% tabs %} {% highlight ts tabtitle="app.ts" %} {% include code-snippet/spreadsheet/angular/autofill-cs1/src/app.ts %} {% endhighlight %}
{% highlight ts tabtitle="main.ts" %} {% include code-snippet/spreadsheet/angular/autofill-cs1/src/main.ts %} {% endhighlight %} {% endtabs %}
{% previewsample "/document-processing/samples/spreadsheet/angular/autofill-cs1" %}
- The Flash Fill feature is not supported in the autofill workflow.
- There is limitation for autofill with conditional formatting applied cells.