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. SpreadJSDesignSettings Settings Tab The Spread Settings section has General, ScrollBars, and Tab Strip options. Selecting any of the options displays the Spread Settings dialog. SpreadJSDesignSettingsDialog 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. SpreadJSDesignSettingsSheet 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. SpreadJSSampleSettingsData 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.