Advanced JavaScript Forms and Data Input With SpreadJS Cell Enhancements
JavaScript SpreadJS Cell Types
SpreadJS includes many different cell types you can apply to any individual cell. Cell Types allow you to define the type of information that can be entered and displayed in the cell. You can also use predefined dropdowns to make it easier for your users to select and enter valid data.
Cell Buttons
Customizable cell buttons allow you to define and attach your action to any cell margin when clicked. Add a search icon to request a dynamically generated dialog.
Radio List
The radio button cell type allows you to add radio button lists to any cell. Users can select one item from the available options. Customize the list display options, including text alignment, layout, direction, and spacing.
Checkbox List
The checkbox cell type, you can add checkbox lists to any cell. Users can select multiple items from the available options as well as customize list displays.
Button List
The button list cell type can add multiple buttons to any cell to select data. Provide users with the flexibility to choose one or multiple items from various options while working with spreadsheets.
Custom Cell
Custom cell types for JavaScript provides the flexibility to create spreadsheets tailored for specific business needs and requests. Build custom cell types with a FivePointedStarCellType definition.
Range Templates
The button cell type allows you to add a button to any cell. Customize the appearance, such as color and text, and set button cell margins for any side.
JavaScript SpreadJS Cell DropDowns
Quickly and easily select data with the cell dropdown menu feature. Create input form controls, advanced structured forms, and other interactive forms and dashboards within the spreadsheet. The cell dropdown options currently available in SpreadJS:
Multi-Column Picker
Developers can create this drop down by specifying a data source and column information, and then setting the style. The PROPERTY function can be especially useful for parsing the returned object, which is described in the PROPERTY Function section of this blog.
Vertical Text List Dropdown
A standard text list implementation comprising of simple text strings in a drop-down list.
Vertical Text List Dropdown with Icon
A standard text list with custom icons. This is essentially a standard vertical text list dropdown with the addition of custom icons.
Vertical Group List Dropdown
A text list with groups for different items. The items in the vertical list can be added to specific groups and indented accordingly.
Vertical Cascade Group List Dropdown
A text list with cascading sub-items for major items. This is similar to the vertical group list, with the groups in this drop down being cascading items.
Group Cascade List Dropdown
A text list with cascading sub-items and groups. This is a combination of the previous two vertical group lists, utilizing both groups and sub-items in those groups that cascade open.
Vertical Tree List Dropdown
A text list of groups with different orientations. This is similar to the vertical group list, but the groups can just be oriented in different directions.
Vertical Tree List Dropdown Collapse
A text list with vertical, collapsible tree items. Items in this list can be grouped similar to other lists, but with the ability to collapse and expand the items.
Custom Defined List Dropdown
A list with custom, defined items. You could use this to create custom dropdowns like color pickers.
Time Picker Dropdown
The time picker dropdown allows users to configure and select a specific time to populate the evaluated result in the cell.
Month Picker Dropdown
The month picker dropdown allows users to configure a specific month in a year to populate the evaluated result in the cell.
Day with Time Dropdown
This dropdown allows users to set Day with Time to populate the evaluated result in the cell, which is shown as a calendar with a scrolling time picker.
Day Minus Time Dropdown
This dropdown allows users to set the day to populate the evaluated result in the cell, which is just shown as a simple month calendar without the scrolling time picker.
Month Time Dropdown
This dropdown allows users to set Month with Time to populate the evaluated result in the cell, which is shown as a year calendar with a scrolling time picker.
Year Time Dropdown
This dropdown allows users to set Year with Time to populate the evaluated result in the cell, which is shown as a decade calendar with a scrolling time picker.
Horizontal Slider
A slider dropdown with a horizontal sliding number scale. You can define the points on this slider to fit requirements.
Vertical Slider
A slider dropdown with a vertical sliding scale. Similar to the horizontal slider dropdown, the different points on the slider can be defined specifically, and can be used for creating things like thermometers.
Default Color Picker
A slider dropdown with a Default Color Picker allows users to choose a specific color to populate the cell value with the hex code of the chosen color.
Custom Color Picker
A slider dropdown with a Custom Color Picker, allowing allows users to set custom color palettes which are defined by the developer.
Calculator Dropdown
The calculator dropdown allows users to compute the values and populate the evaluated result in the cell using standard calculator with the appropriate operators.
Workflow Dropdown
A powerful feature allows users to quickly select workflow items and populate the chosen value in the cell.
What's New in SpreadJS v16.2
SpreadJS v16.2 is available. This release offers several great new features, some of which include:
-
And Much More!
