Button List Cell

SpreadJS allows users to create button lists within the cells of the spreadsheet.

This cell type refers to an interactive list with multi-selection values. It displays a group of items embedded within a single cell where one or multiple options can be selected to record end-user response. Users can create a button list cell in the worksheet and configure the layout of the items in the button list as per their specific preferences.

Usage Scenario

A button list is helpful when users need to create a group of related items that can be targeted and queried across multiple related entities including contacts, customers, accounts, events, marketing lists and more. This cell type is similar to the check box list and radio list usage but provides users with the flexibility to choose one or multiple items from a range of options while working with spreadsheets.

Example - The following image depicts a spreadsheet that records user response on the programming languages that they prefer to work with. In this example, button list celltype has been added in cell B2 to ensure users can select one or more languages from the list.

Customize a Button List

While working with button list cell type in SpreadJS, users can execute the following tasks in order to customize it as per their specific preferences:

• Users can specify the text selection mode for the button cells as single or multiple using the SelectionMode enumeration.

• Users can customize the background color and the foreground color of the selected button item in the list by using the selectedBackColor() method and the selectedForeColor() method of the button class respectively.

• Users can customize the padding of the items in the button list (in pixels) relative to the cell by using the padding() method.

• Users can identify whether the layout of the button list is autofit or not by using the isFlowLayout() method. By default, the value parameter of this method is set to "true".

• Users can set the order of the button list cell type as horizontal or vertical, using the Direction enumeration.

• Users can get or set the items for the row count and the column count of the button list by using the maxRowCount() method and the maxColumnCount() method respectively. This can be done only when the value parameter of the isFlowLayout() method is set to true and the direction is horizontal.

• Users can configure spacing between the two list items in order to avoid congestion and clutter inside the cell. This can be done by using the itemSpacing() method.

Using Code

Refer to the following example code to create a basic button list in a cell while working with spreadsheets.

// Initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// Get the activesheet
var activeSheet = spread.getSheet(0);

// This example creates a ButtonList celltype
var buttonListCellType = new GC.Spread.Sheets.CellTypes.ButtonList();
activeSheet.setText(0, 1, "Select Programming Languages : ", GC.Spread.Sheets.SheetArea.viewport);
buttonListCellType.items([{ text: "Javascript", value: 1 }, { text: "Python", value: 2 }, { text: "Java", value: 3 }, { text: "PHP", value: 4 }, { text: "Objective-C", value: 5 }, { text: "Ruby", value: 6 }, { text: "SQL", value: 7 }, { text: "Swift", value: 8 }, { text: "C/CPP", value: 9 }, { text: "C#", value: 10 }]);

activeSheet.getCell(1, 1).cellType(buttonListCellType);

// Set the buttonListCellType Direction to vertical
buttonListCellType.direction(GC.Spread.Sheets.CellTypes.Direction .vertical);

// Set the space for two items in the buttonList
buttonListCellType.itemSpacing({
   horizontal: 80,
   vertical: 20
});

// Set the row height
activeSheet.setRowHeight(1, 250.0, GC.Spread.Sheets.SheetArea.viewport);

// Set the column width
activeSheet.setColumnWidth(1, 250.0, GC.Spread.Sheets.SheetArea.viewport);