SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage User Interface / 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);
    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>