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. SpreadJSDesignerCell Designer Select this icon for the button cell: SpreadJSButtonIcon Select this icon for the check box cell: SpreadJSCheckBoxIcon Select this icon for the combo box cell: SpreadJSComboCellIcon Select this icon for the hyperlink cell: SpreadJSHyperLinkIcon The Button CellType dialog has the following options: SpreadJSButtonCell 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: SpreadJSCheckBoxCell 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: SpreadJSComboBoxCell 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: SpreadJSHyperLink 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. SpreadJSDesignerExample SpreadJS Designer Example