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:
Select this icon for the check box cell:
Select this icon for the combo box cell:
Select this icon for the hyperlink cell:
The Button CellType dialog has the following options:
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:
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:
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:
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.
SpreadJS Designer Example