Auto Fill Lists

SpreadJS allows users to automatically fill lists by using the drag fill option in the following ways.

1. Using Drag Fill for Built-in Lists

2. Using Drag Fill for Custom Lists

Using Drag Fill for Built-in Lists

Built-in lists are provided by default when you work with SpreadJS. These lists are used especially when users want to fill in abbreviated day names, day names, abbreviated month names, and month names. While executing the drag fill operation for built-in lists, you can ignore the case but the filled value should exactly match the entry in the list.

For various built-in cultures, a built-in list displays a different language, as shown in the table shared below. The default culture is "en-US" which defines the list in the English language.

The following code sample shows how to use built-in lists.

const sheet = spread.getActiveSheet();

sheet.setValue(0, 0, "Sunday");
sheet.setValue(1, 0, "Monday");

sheet.fillAuto(
    new GC.Spread.Sheets.Range(0, 0, 2, 1),
    new GC.Spread.Sheets.Range(0, 0, 8, 1),
    {
        fillType: GC.Spread.Sheets.Fill.FillType.auto,
        series: GC.Spread.Sheets.Fill.FillSeries.column,
        fillDirection: GC.Spread.Sheets.Fill.FillDirection.down
    }
);

// Result:
// Sunday
// Monday
// Tuesday
// Wednesday
// Thursday
// Friday
// Saturday
// Sunday

Using Drag Fill for Custom Lists

Custom lists let users define their own repeated sequences for drag fill. This is useful when a worksheet uses business-specific sequences, such as region names, product categories, or custom reporting periods.

To use a custom list, define the list in the workbook options. When users enter one or more consecutive values from the list and drag the fill handle, SpreadJS fills the remaining cells according to the order of the custom list.

The following code sample shows how to define and use custom lists.

const customList = [
    ["Light", "Sun", "Moon", "Star", "Sky", "Rain"],
    ["Dog", "Cat", "Lion", "Fish", "Snake"]
];

const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
    sheetCount: 1,
    customList: customList
});

const sheet = spread.getActiveSheet();

sheet.setValue(0, 0, "Light");
sheet.setValue(1, 0, "Sun");

sheet.fillAuto(
    new GC.Spread.Sheets.Range(0, 0, 2, 1),
    new GC.Spread.Sheets.Range(0, 0, 8, 1),
    {
        fillType: GC.Spread.Sheets.Fill.FillType.auto,
        series: GC.Spread.Sheets.Fill.FillSeries.column,
        fillDirection: GC.Spread.Sheets.Fill.FillDirection.down
    }
);

// Result:
// Light
// Sun
// Moon
// Star
// Sky
// Rain
// Light
// Sun