The SpreadJS Designer allows you to create basic cell types quickly and without code.
You can create button, check box, combo box, and hyperlink cells in the SpreadJS Designer.
The options for setting the cell type are located under the Home tab.
Select this icon for the button cell: Image may be NSFW.
Clik here to view.
Select this icon for the check box cell: Image may be NSFW.
Clik here to view.
Select this icon for the combo box cell: Image may be NSFW.
Clik here to view.
Select this icon for the hyperlink cell: Image may be NSFW.
Clik here to view.
The Button CellType dialog has the following options:
Clik here to view.
Button CellType Dialog
| Option | Description |
| Margin: Left, Top, Right, and Bottom | Specifies the margin in pixels in the cell. |
| BackColor | Specifies the background color for the button cell. |
| Text | Specifies the text in the button cell. |
The CheckBox CellType dialog has the following options:
Clik here to view.
CheckBox CellType Dialog
| Option | Description |
| True | Specifies the value when the cell is checked. |
| Indeterminate | Specifies the value when the cell is null. |
| False | Specifies the value when the cell is unchecked. |
| Align | Specifies the text alignment relative to the check box. |
| Caption | Specifies a caption for the cell. This text is displayed if True, False, or Indeterminate is not set. |
| IsThreeState | Specifies whether the check box uses True and False or True, Indeterminate, and False. |
The ComboBox CellType dialog has the following options:
Clik here to view.
ComboBox CellType Dialog
| Option | Description |
| EditorValueType | Gets or sets the value (text, value, or index) that is written to the underlying data model. |
| Items Height | Specifies the height of each item. |
| Editable | Specifies whether the combo box is editable. |
| Items | Specifies the list of items for the combo box. Use the Add or Remove buttons to add or remove items to the list. |
| Text | Specifies the item text. |
| Value | Specifies the item value. |
The EditorValueType option has the following settings:
| EditorValueType Option | Description |
| Index | Writes the index of the selected item to the model. |
| Text | Writes the text value of the selected item to the model. |
| Value | Writes the corresponding data value of the selected item to the model. |
The HyperLink CellType dialog has the following options:
Clik here to view.
HyperLink CellType Dialog
| Option | Description |
| Link | Specifies the color of the hyperlink. |
| VisitedLink | Specifies the color of the hyperlink after it has been selected. |
| Text | Specifies the text displayed in the hyperlink. |
| LinkToolTip | Specifies a tooltip for the hyperlink. |
Type the hyperlink value in the cell and then set the hyperlink cell type. The cell value is used for the hyperlink URL.
The following image displays a column of button, check box, combo box, and hyperlink cells in the designer.
Clik here to view.
SpreadJS Designer Example