SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage User Interface / Cell Dropdowns
In This Topic
    Cell Dropdowns
    In This Topic

    SpreadJS allows users to add a drop down cell in the worksheet. With this feature, users can add a drop down menu with specific properties to the cells in a workbook as per their specific requirements and preferences.

    What are Cell Dropdowns?

    Cell dropdowns provide a drop down menu in the cell that can help users in selecting the data easily and quickly.

    This feature is helpful in creating input form controls, advanced structured forms and other interactive forms and dashboards within the spreadsheet.

    Types of Cell Dropdowns - SpreadJS provides eight different types of built-in dropdown menus while working with spreadsheets. Users can use the DropDownType enumeration to simply specify a value (ranging from 0 to 7) and the corresponding cell dropdown type will be picked as per the following options:

    Configuring Cell Dropdowns - Users can configure a dropdown cell with a list of predefined values (using a list dropdown); calculated values (using a calculator dropdown); calendars and events (using date time picker, month picker and time picker dropdowns); select a color (using color picker dropdown); create range sliders (using a slider dropdown) and automatically repopulate the next available choices based on the earlier choice (using a workflow list dropdown) as shown in the screesnhot shared below.

    Dropdown cells

    Calculator Dropdown

    The calculator dropdown in a cell allows users to compute the values and populate the evaluated result in the cell. The following screenshot depicts the calculator dropdown in cell C3 with a dropdown indicator.

    Calculator dropdown in a cell 

     

    Users can configure the calculator dropdown in a cell by adding a dropdown button using the cellButtons field of the Style class and setting its command parameter to "openCalculator" as shown in the code snippet shared below.

    JavaScript
    Copy Code 
    // Set Calculator Dropdown
var calStyle = new GC.Spread.Sheets.Style();
calStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openCalculator",
useButtonStyle: true,
}
];
activeSheet.setText(2, 3, "Calculator Dropdown");
activeSheet.setStyle(2, 4, calStyle);

    Date Time Picker Dropdown

    The date time picker dropdown in a cell allows users to set date and time to populate the evaluated result in the cell. The following screenshot depicts the date time picker dropdown in cell C5 with a dropdown indicator.

    Date time picker dropdown in a cell

    Users can configure the date time picker dropdown in a cell by adding a dropdown button using the cellButtons field of the Style class and setting its command parameter to "openDateTimePicker" as shown in the code snippet shared below.

    JavaScript
    Copy Code 
    // Set DateTimePicker Dropdown
var dateTimeStyle = new GC.Spread.Sheets.Style();
dateTimeStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openDateTimePicker",
useButtonStyle: true,
}
];
dateTimeStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.dateTimePicker,
option: {
  showTime: true,
}
}
];
activeSheet.setText(4, 3, "DateTimePicker Dropdown");
activeSheet.setStyle(4, 4, dateTimeStyle);

    Month Picker Dropdown

    The month picker dropdown in a cell allows users to configure a specific month in a year to populate the evaluated result in the cell. The following screenshot depicts the month picker dropdown in cell C7 with a dropdown indicator.

    Month picker dropdown in a cell

    Users can configure the month picker dropdown in a cell by adding a dropdown button using the cellButtons field of the Style class and setting its command parameter to "openMonthPicker" as shown in the code snippet shared below.

    JavaScript
    Copy Code 
    // Set MonthPicker Dropdown
var monthPickerStyle = new GC.Spread.Sheets.Style();
monthPickerStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMonthPicker",
useButtonStyle: true,
}
];
monthPickerStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.monthPicker,
option: {
  startYear: 2009,
  stopYear: 2019,
  height: 300,
}
}
];
activeSheet.setText(6, 3, "Month Picker Dropdown");
activeSheet.setStyle(6, 4, monthPickerStyle);

    Time Picker Dropdown

    The time picker dropdown in a cell allows users to configure a specific time to populate the evaluated result in the cell. The following screenshot depicts the time picker dropdown in cell C9 with a dropdown indicator.

    Time picker dropdown in a cell

    Users can configure the time picker dropdown in a cell by adding a dropdown button using the cellButtons field of the Style class and setting its command parameter to "openTimePicker" as shown in the code snippet shared below.

    JavaScript
    Copy Code 
    // Set the TimePicker Dropdown
var timePickerStyle = new GC.Spread.Sheets.Style();
timePickerStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openTimePicker",
useButtonStyle: true,
}
];
timePickerStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.timePicker,
option: {
  min: { hour: 8 },
  max: { hour: 19 },
  step: { minute: 30 },
  formatString: "h:mm AM/PM",
}
}
];
activeSheet.setText(8, 3, "Time Picker Dropdown");
activeSheet.setStyle(8, 4, timePickerStyle);

    Color Picker Dropdown

    The color picker dropdown in a cell allows users to choose a specific color to populate the cell value with the hex code of the chosen color. The following screenshot depicts the color picker dropdown in cell C11 with a dropdown indicator.

     

    Color picker dropdown in a cell

    Users can configure the color picker dropdown in a cell by adding a dropdown button using the cellButtons field of the Style class and setting its command parameter to "openColorPicker" as shown in the code snippet shared below.

    JavaScript
    Copy Code 
    // Set the ColorPicker Dropdown
var colorPickerStyle = new GC.Spread.Sheets.Style();
colorPickerStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openColorPicker",
useButtonStyle: true,
}
];
activeSheet.setText(10, 3, "Color Picker Dropdown");
activeSheet.setStyle(10, 4, colorPickerStyle);

    List Dropdown

    The list dropdown in a cell allows users to choose a specific item from the dropdown list to populate the cell value. The following screenshot depicts the list dropdown in cell C13 with a dropdown indicator.

    List dropdown in a cell

    Users can configure the list dropdown in a cell by adding a dropdown button using the cellButtons field of the Style class and setting its command parameter to "openList" as shown in the code snippet shared below.

    JavaScript
    Copy Code 
    // Set the List Dropdown
var listStyle = new GC.Spread.Sheets.Style();
listStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
listStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.list,
option: {
  items: [
  {
  text: 'item1',
  value: 'item1'
  },
  {
  text: 'item2',
  value: 'item2'
  },
  {
  text: 'item3',
  value: 'item3'
  },
  {
  text: 'item4',
  value: 'item4'
  }
  ],
}
}
];
activeSheet.setText(12, 3, "List Dropdown");
activeSheet.setStyle(12, 4, listStyle);

    Additionally, SpreadJS also allows users to choose multiple items from the dropdown list to populate the cell value. As can be seen from the below image, when multiple items are selected from the dropdown, they are separated by a comma in between.

    Choosing multiple items from the dropdown list

     

    Users can select multiple items from the dropdown list by setting the multiselect property to true as shown in the code snippet shared below.

    JavaScript
    Copy Code 
     // set the list data
 var listData = {
     multiSelect: true,
      items: [
             {
                text: 'SpreadSheets',
                value: 'SpreadSheets',
                layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.popup },
                items: [
                    {
                        text: 'Spread.NET',
                        value: 'Spread.NET'
                    },
                    {
                        text: 'SpreadJS',
                        value: 'SpreadJS'
                    },
                    {
                        text: 'Spread COM',
                        value: 'Spread COM'
                    },
                    {
                        text: 'DataViewJS',
                        value: 'DataViewJS'
                    }
                ]
            },
            {
                text: 'Javascript',
                value: 'Javascript',
            },
            {
                text: 'Reporting',
                value: 'Reporting',
            },
            {
                text: 'Document APIS',
                value: 'Document APIS',
                layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.popup },
                items: [
                    {
                        text: 'Documents for Excel',
                        value: 'Documents for Excel'
                    },
                    {
                        text: 'Excel Template Language',
                        value: 'Excel Template Language'
                    },
                    {
                        text: 'Documents for PDF',
                        value: 'Documents for PDF'
                    },
                    {
                        text: 'Documents for PDF Viewer',
                        value: 'Documents for PDF Viewer'
                    },
                    {
                        text: 'Documents for Microsoft Word',
                        value: 'Documents for Microsoft Word'
                    },
                    {
                        text: 'Documents for Imaging',
                        value: 'Documents for Imaging'
                    }
                ]
            }
        ]
    };
    var style = new GC.Spread.Sheets.Style();
    style.cellButtons = [
        {
            imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
            command: "openList",
            useButtonStyle: true,
        }
    ];
    style.dropDowns = [
        {
            type: GC.Spread.Sheets.DropDownType.list,
            option: listData
        }
    ];
    activeSheet.setStyle(0, 0, style);
});

    Slider Dropdown

    The slider dropdown in a cell allows users to add a dynamic range slider in a cell that populates the current value in the cell. The following screenshot depicts the slider dropdown in cell C15 with a dropdown indicator.

    Slider dropdown in a cell 

    Users can configure the slider dropdown in a cell by adding a dropdown button using the cellButtons field of the Style class and setting its command parameter to "openSlider" as shown in the code snippet shared below.

    JavaScript
    Copy Code 
    // Set the Slider dropdown
var horizontalSliderStyle = new GC.Spread.Sheets.Style();
horizontalSliderStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openSlider",
useButtonStyle: true,
}
];
horizontalSliderStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.slider,
option: {
  marks: [0, 50, 100],
  step: 10,
  direction: GC.Spread.Sheets.LayoutDirection.horizontal,
}
}
];
activeSheet.setText(14, 3, "Slider Dropdown");
activeSheet.setStyle(14, 4, horizontalSliderStyle);

    Workflow List Dropdown

    The workflow list dropdown in a cell allows users to select workflow item easily and quickly to populate the chosen value in the cell. The following screenshot depicts the workflow list dropdown in cell C17 with a dropdown indicator.

    Workflow list dropdown

    Users can configure the workflow list dropdown in a cell by adding a dropdown button using the cellButtons field of the Style class and setting its command parameter to "openWorkflowList" as shown in the code snippet shared below.

    JavaScript
    Copy Code 
     //Set the Workflow list dropdown
let workflowListStyle = new GC.Spread.Sheets.Style();
workflowListStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openWorkflowList",
useButtonStyle: true,
}
];
workflowListStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.workflowList,
option: {
  items: [
  { value: "New", transitions: [1] },
  { value: "Open", transitions: [0, 2, 3, 5] },
  { value: "In Progress", transitions: [1, 3, 5] },
  { value: "Resolved", transitions: [5, 4] },
  { value: "Reopened", transitions: [5, 3, 2] },
  { value: "Closed", transitions: [4] },
  ]
}
}
];
activeSheet.setText(16, 3, "Workflow List Dropdown");
activeSheet.setStyle(16, 4, workflowListStyle);

     

     

    Copyright © 2020 GrapeCity, Inc. All rights reserved.

    Product Support Forum | Print this page