# Drag Fill

A tutorial showing how to use the drag fill functionality in SpreadJS, including UI, code, and specific scenarios

## Content

SpreadJS has a drag fill option that allows the user to select cells and fill other cells with the same or different values. The fill type can be set to linear, growth, date, or automatic fill. The fill direction can also be specified. Additional options can be set such as step and stop values.

Select a cell or block and move the mouse pointer over the square at the corner of the selection. The mouse pointer changes to a plus shape that can be used to expand the fill range.
![SpreadJS worksheet showing a selected cell with the drag fill handle and plus cursor used to start a cell range fill operation.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260706.aa6a3e.png?width=250)
Expand the range and release the mouse.
![SpreadJS worksheet showing a drag fill operation expanding a selected cell range downward before releasing the mouse.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260706.51e070.png?width=250)
![SpreadJS worksheet showing the result of drag fill, with the selected cell value copied into the expanded cell range.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260706.01e675.png?width=250)
Click on the plus mark to display a menu with additional fill options as shown in the following image:
![SpreadJS worksheet showing the drag fill options menu with commands such as Copy Cells and Fill Series for choosing fill behavior.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260706.0031e3.png?width=250)
Drag fill is not supported if the destination range contains a spanned cell. Drag fill does not apply to a conditional format or filtered range.
The **options.allowUserDragFill** property is used to specify whether to allow drag fill. The [fillAuto](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#fillAuto) method can be used to programmatically specify the type of fill.

The following code sample shows how to auto-fill a cell range.

```javascript
spread.options.allowUserDragFill = true;

activeSheet.setValue(0, 0, new Date(2011, 1, 1));
activeSheet.setValue(0, 1, new Date(2011, 2, 9));
activeSheet.setValue(0, 2, 5);
activeSheet.setValue(0, 3, 10);
activeSheet.setValue(0, 4, 1);

var start = new GC.Spread.Sheets.Range(0, 0, 1, 1);

var r = new GC.Spread.Sheets.Range(0, 0, 4, 1);
activeSheet.fillAuto(start, r,
{
    fillType: GC.Spread.Sheets.Fill.FillType.date,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
    fillDirection: GC.Spread.Sheets.Fill.FillDirection.down,
    unit: GC.Spread.Sheets.Fill.FillDateUnit.day,
    step: 1,
    stop: new Date(2011, 2, 11)
});
start = new GC.Spread.Sheets.Range(0, 1, 1, 1);

var r2 = new GC.Spread.Sheets.Range(0, 1, 4, 1);
activeSheet.fillAuto(start, r2,
{
fillType: GC.Spread.Sheets.Fill.FillType.date,
series: GC.Spread.Sheets.Fill.FillSeries.column,
fillDirection:GC.Spread.Sheets.Fill.FillDirection.down,
unit: GC.Spread.Sheets.Fill.FillDateUnit.day,
step: 1,
stop: new Date(2011, 2, 11)
});
start = new GC.Spread.Sheets.Range(0, 2, 1, 1);

var r3 = new GC.Spread.Sheets.Range(0, 2, 4, 1);
activeSheet.fillAuto(start, r3,
{
    fillType: GC.Spread.Sheets.Fill.FillType.auto,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
});
start = new GC.Spread.Sheets.Range(0, 3, 1, 1);

var r4 = new GC.Spread.Sheets.Range(0, 3, 4, 1);
activeSheet.fillAuto(start, r4,
{
    fillType: GC.Spread.Sheets.Fill.FillType.growth,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
    step:2,
    stop:55
});
start = new GC.Spread.Sheets.Range(0, 4, 1, 1);

var r5 = new GC.Spread.Sheets.Range(0, 4, 4, 1);
activeSheet.fillAuto(start, r5,
{
    fillType: GC.Spread.Sheets.Fill.FillType.linear,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
    step:3,
    stop:20
});
activeSheet.setValue(0, 5, 123);

var r6 = new GC.Spread.Sheets.Range(0, 5, 4, 1);
activeSheet.fillAuto(new GC.Spread.Sheets.Range(0, 5, 1, 1), r6,
{
    fillType: GC.Spread.Sheets.Fill.FillType.auto,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
});
```

![SpreadJS worksheet output showing cell ranges filled by the fillAuto method with date, automatic, growth, and linear series results.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260706.4362e0.png?width=400)

## Find Invalid Range When Using Drag Fill

You can receive information such as data range and the number of rows/columns when any kind of invalid operation involving drag fill occurs using the **invalidOperation** event.
The InvalidOperation event argument provides a parameter called **fillRange** which returns the range used for the fill operation when invalidType is **dragFill**.
![SpreadJS drag fill invalid operation workflow showing a worksheet fill attempt that triggers the InvalidOperation event and returns the fillRange information.](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/dragfill-invalid.gif)
The following code sample shows how to retrieve information about invalid ranges when using the dragfill operation.

```javascript
// Configure Workbook and Worksheet
var spread = new GC.Spread.Sheets.Workbook("ss");
var activeSheet = spread.getActiveSheet();
    
// Set allowCopyPasteExcelStyle to true
spread.options.allowCopyPasteExcelStyle = true;

spread.bind(GC.Spread.Sheets.Events.InvalidOperation, (e, args) => {
    // This code registers the invalid range when drag fill operation is performed
    if (args.invalidType == GC.Spread.Sheets.InvalidOperationType.dragFill)
        console.log(args.fillRange);
});
```