The SpreadJS Designer allows you to create spreadsheets quickly and without code. The Settings tab in the designer provides appearance and UI options for the entire widget and specific sheets.
Settings Tab
The Spread Settings section has General, ScrollBars, and Tab Strip options. Selecting any of the options displays the Spread Settings dialog.
Spread Settings Dialog
The General tab or option has the following settings:
| Setting | Description |
| Allow Drag and Drop | Specifies whether to allow the user to drag and drop a cell data range to another range. |
| Allow Drag and Fill | Specifies whether to allow the user to drag fill a range of cells. |
| Allow Undo | Specifies whether to allow the user to undo edit operations. |
| AllowUser to Enter Formulas | Specifies whether to allow the user to edit formulas in a cell in the spreadsheet. |
| Allow Zoom | Specifies whether the user can scale the display of the component using the Ctrl key and the mouse wheel. |
| Allow Overflow | Specifies whether data can overflow into adjacent empty cells. |
The ScrollBars tab or option has the following settings:
| Setting | Description |
| Vertical ScrollBar | Specifies whether to display the vertical scroll bar. |
| ScrollBarShowMax | Specifies whether the displayed scroll bars are based on the entire number of columns and rows in the sheet. |
| Horizontal ScrollBar | Specifies whether to display the horizontal scroll bar. |
| ScrollBar MaxAlign | Specifies whether the scroll bar aligns with the last row and column of the active sheet. |
The Tab Strip tab or option has the following settings:
| Setting | Description |
| Tab Strip Visible | Specifies whether to display the tab strip. |
| New Tab Visible | Specifies whether the spreadsheet displays a special tab that allows users to insert new sheets. |
| Tab Strip Editable | Specifies whether the user can edit the sheet tab name. |
| Tab Strip Ratio (as percentage) | Sets the width of the tab strip expressed as a percentage of the overall horizontal scroll bar width. |
The Sheet Settings section has General, Grid Lines, Calculation, Headers, and SheetTab options.
Sheet Settings Dialog
The General tab or option has the following settings:
| Setting | Description |
| Column Count | Sets the number of columns. |
| Row Count | Sets the number of rows. |
| Frozen Column Count | Sets the number of frozen columns. |
| Frozen Row Count | Sets the number of frozen rows. |
| Trailing Frozen Column Count | Sets the number of frozen trailing columns. |
| Trailing Frozen Row Count | Sets the number of frozen trailing rows. |
| Selection Policy | Specifies whether the users can select ranges of items. |
| Protect | Specifies that cells cannot be edited. |
The Grid Lines tab or option has the following settings:
| Setting | Description |
| Horizontal Gridline | Specifies whether to display horizontal grid lines. |
| Vertical Gridline | Specifies whether to display vertical grid lines. |
| Gridline Color | Sets the grid line color. |
The Calculation tab or option has the following setting:
| Setting | Description |
| Reference Style | Sets the style for cell and range references in cell formulas on this sheet. |
The Headers tab or option has the following settings:
| Setting | Description |
| Column Header Row Count | Sets the number of rows in the column header. |
| Column Header Auto Text | Sets the column header text to Blank, Numbers, or Letters. |
| Column Header Auto Index | Sets which column header row displays the automatic text when there are multiple column header rows. |
| Default Row Height | Sets the row height for the column headers. |
| Column Header Visible | Specifies whether to display column headers. |
| Row Header Column Count | Sets the number of columns in the row header. |
| Row Header Auto Text | Sets the row header text to Blank, Numbers, or Letters. |
| Row Header Auto Index | Sets which row header column displays the automatic text when there are multiple row header columns. |
| Default Column Width | Sets the column width for the row headers. |
| Row Header Visible | Specifies whether to display row headers. |
The SheetTab tab or option has the following setting:
| Setting | Description |
| Sheet Tab Color | Specifies the tab color for the sheet. |
The following image displays data in the SpreadJS Designer with frozen rows and hidden column and row headers.
Designer Settings
Refer to the following topic for more information about the designer – http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#spdesigner.html.
Note: The SpreadJS designer requires the 4.0 .NET framework and Microsoft Windows Platform.