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

What is a Check Box List?

A check box list refers to an interactive checklist or a to-do list with multi-selection field values. It displays a group of items via multiple check boxes (small square shaped selection boxes) embedded within a single cell. Users can click the check box in order to select or deselect a specific option.

Usage Scenario

A check box list celltype is helpful when users need to select multiple field values in a cell while working with spreadsheets. With the help of a check box list, users can create a customer feedback survey, an input form, interactive checklists and dynamic reports quickly and efficiently.

Example - Let's say you want to analyse the end-user response of company products in an easy and effective way. In such a scenario, creating a user-friendly check box list in the worksheet is a great idea to record customer response, as shown in the snapshot below:  

Customize a Check Box List

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

• Users can configure the text alignment using the textAlign() method. The available options in the TextAlign enumeration are left and right.
• Users can identify whether the layout of the check box 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 direction of the check box 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 check box list 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 within the list items inside the cell. This can be done by using the itemSpacing() method.

Using Code

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

<script>
$(document).ready(function ()
{
 // 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 CheckBoxList celltype
var checkBoxListCellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
activeSheet.getCell(0, 1).font("italic 16px Calibri");
activeSheet.getCell(0, 1).foreColor("Red");
activeSheet.getCell(0, 1, GC.Spread.Sheets.SheetArea.viewport).value("What factors are important to you when buying software products? ").wordWrap(true);
checkBoxListCellType.items([{ text: "Price", value: 1 }, { text: "Usability", value: 2 }, { text: "Features", value: 3 }, { text: "Support", value: 4 }, { text: "Others", value: 5 }]);

// Configure spacing for two items in the CheckBoxList
checkBoxListCellType.itemSpacing({
horizontal: 20, vertical: 10
});

// Configure the checkBoxListCellType to vertical
checkBoxListCellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
 
// Configure the position of text in CheckBoxList, only support left and right
checkBoxListCellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
activeSheet.getCell(1, 1).cellType(checkBoxListCellType);

// Configure the row height
activeSheet.setRowHeight(0, 70.0, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setRowHeight(1, 140.0, GC.Spread.Sheets.SheetArea.viewport);

// Configure the column width
activeSheet.setColumnWidth(1, 200.0, GC.Spread.Sheets.SheetArea.viewport);
});
</script>