SpreadJS 14
Features / Cells / Cell Types / Button List Cell
In This Topic
    Button List Cell
    In This Topic

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

    What is a Button List?

    A button list 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.

    Button lists

    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:

    Using Code

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

    JavaScript
    Copy Code
    // 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);