SpreadJS 14
Features / Cells / Cell Types / Check Box List Cell
In This Topic
    Check Box List Cell
    In This Topic

    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:  
    Check box list cell

    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:

    Using Code

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

    JavaScript
    Copy Code
    <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);
    
      // Configure the check box size in CheckBoxList, only support number and "auto"
      checkBoxListCellType.boxSize(20);
      activeSheet.getCell(1, 1).cellType(checkBoxListCellType);
    
      // Configure the row height
      activeSheet.setRowHeight(0, 70.0, GC.Spread.Sheets.SheetArea.viewport);
      activeSheet.setRowHeight(1, 160.0, GC.Spread.Sheets.SheetArea.viewport);
    
      // Configure the column width
      activeSheet.setColumnWidth(1, 200.0, GC.Spread.Sheets.SheetArea.viewport);
    
        });
    </script>