Using Drag Fill

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.

Expand the range and release the mouse.

Click on the plus mark to display a menu with additional fill options as shown in the following image:

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 canUserDragFill method is used to specify whether to allow drag fill. The fillAuto method, fillDate method, fillGrowth method, or fillLinear method can be used to programmatically specify the type of fill.

Using Code

This example fills a cell range.

JavaScript	Copy Code
spread.canUserDragFill(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 GcSpread.Sheets.Range(0, 0, 1, 1); var r = new GcSpread.Sheets.Range(0, 0, 4, 1); activeSheet.fillDate(start,r, GcSpread.Sheets.FillSeries.Column,GcSpread.Sheets.FillDateUnit.Day, 2); start = new GcSpread.Sheets.Range(0, 1, 1, 1); var r2 = new GcSpread.Sheets.Range(0, 1, 4, 1); activeSheet.fillDate(start,r2, GcSpread.Sheets.FillSeries.Column, GcSpread.Sheets.FillDateUnit.Day, 1, new Date(2011, 2, 11)); start = new GcSpread.Sheets.Range(0, 2, 1, 1); var r3 = new GcSpread.Sheets.Range(0, 2, 4, 1); activeSheet.fillAuto(start,r3, GcSpread.Sheets.FillSeries.Column); start = new GcSpread.Sheets.Range(0, 3, 1, 1); var r4 = new GcSpread.Sheets.Range(0, 3, 4, 1); activeSheet.fillGrowth(start,r4, GcSpread.Sheets.FillSeries.Column, 2, 55); start = new GcSpread.Sheets.Range(0, 4, 1, 1); var r5 = new GcSpread.Sheets.Range(0, 4, 4, 1); activeSheet.fillLinear(start,r5, GcSpread.Sheets.FillSeries.Column, 3, 20); activeSheet.setValue(0,5,123); var r6 = new GcSpread.Sheets.Range(0, 5, 4, 1); activeSheet.fillAuto(new GcSpread.Sheets.Range(0, 5, 1, 1), r6, GcSpread.Sheets.FillSeries.Column);

JavaScript

Copy Code

spread.canUserDragFill(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 GcSpread.Sheets.Range(0, 0, 1, 1);
var r = new GcSpread.Sheets.Range(0, 0, 4, 1);
activeSheet.fillDate(start,r, GcSpread.Sheets.FillSeries.Column,GcSpread.Sheets.FillDateUnit.Day, 2);
start = new GcSpread.Sheets.Range(0, 1, 1, 1);
var r2 = new GcSpread.Sheets.Range(0, 1, 4, 1);
activeSheet.fillDate(start,r2, GcSpread.Sheets.FillSeries.Column, GcSpread.Sheets.FillDateUnit.Day, 1, new Date(2011, 2, 11));
start = new GcSpread.Sheets.Range(0, 2, 1, 1);
var r3 = new GcSpread.Sheets.Range(0, 2, 4, 1);
activeSheet.fillAuto(start,r3, GcSpread.Sheets.FillSeries.Column);
start = new GcSpread.Sheets.Range(0, 3, 1, 1);
var r4 = new GcSpread.Sheets.Range(0, 3, 4, 1);
activeSheet.fillGrowth(start,r4, GcSpread.Sheets.FillSeries.Column, 2, 55);
start = new GcSpread.Sheets.Range(0, 4, 1, 1);
var r5 = new GcSpread.Sheets.Range(0, 4, 4, 1);
activeSheet.fillLinear(start,r5, GcSpread.Sheets.FillSeries.Column, 3, 20);
activeSheet.setValue(0,5,123);
var r6 = new GcSpread.Sheets.Range(0, 5, 4, 1);
activeSheet.fillAuto(new GcSpread.Sheets.Range(0, 5, 1, 1), r6, GcSpread.Sheets.FillSeries.Column);