SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage User Interface / Cell Types / Radio Button List Cell
In This Topic
    Radio Button List Cell
    In This Topic

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

    What is a Radio Button List?

    A radio button list celltype provides users with the ability to choose and select a single item from a list of several options that are listed within a cell in the worksheet. It refers to a group of radio buttons (small round shaped option buttons) embedded within a single cell. Users can click the radio button in the list in order to select or deselect a specific option. 

    Usage Scenario

    Radio button list celltype is helpful when you want to create a poll or questionnaire containing a list of multiple options but only a single response is expected from the end user.


    Example - Let's say you're working on a sales application where you want to keep a record of the payment mode used by the customers while purchasing a particular product. In this scenario, using a radio button list celltype in the spreadsheet will help users to choose only a single payment mode from a list of available payment options (like Cash, Credit Card or Debit Card), as shown in the snapshot below: 


    Radio button cell list

    Customize a Radio Button List

    While working with radio 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 radio button 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 radioButtonList celltype
      var radioButtonListCellType = new GC.Spread.Sheets.CellTypes.RadioButtonList();
      activeSheet.setText(0, 1, "Select Mode Of Payment : ", GC.Spread.Sheets.SheetArea.viewport);
      radioButtonListCellType.items([{ text: "Credit Card", value: 1 },
      { text: "Debit Card", value: 2 },   { text: "Cash", value: 3 }]);
      radioButtonListCellType.isFlowLayout(true);
      
      // Configure the direction of the radio button list to horizontal
      radioButtonListCellType.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal);
    
      // Configure the space for two items in the radio button list
      radioButtonListCellType.itemSpacing({
      horizontal: 20, vertical: 10
    });
    
      // Configure the text of radio button's position, only support left and right
      radioButtonListCellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);
      activeSheet.getCell(1, 1).cellType(radioButtonListCellType);
    
      // Configure the column width
      activeSheet.setColumnWidth(1, 300.0, GC.Spread.Sheets.SheetArea.viewport);
    });
    </script>