Diagonal Cell

The Diagonal cell type in SpreadJS represents a diagonal cell, which enables you to insert diagonal lines within a cell. This cell type is useful for designing table headers or separating data areas in reports.

A diagonal cell can display multiple text items divided by diagonal lines in different sections. The cell's value determines how these items are displayed. To set a diagonal cell type for a specific cell, use the GC.Spread.Sheets.CellTypes.Diagonal() method. When exporting to Excel, diagonal cells are converted into images.

Diagonal Cells Formatting

Let's discuss the various settings needed for a diagonal cell in the sections below.

Diverge Direction

The diverging direction determines the start-to-end directions of the diagonal lines. No matter what the diverging direction is, the items are always arranged clockwise starting from top to bottom. To define the possible directions for the diagonal line in a cell, use the properties of DivergeDirection enumeration.

The following table shows different diverging directions to display the items of [“Year“,” Product”,” Region”].

Diverging direction	Sample image
TopLeftToBottomRight
BottomLeftToTopRight

Cell Value Types

The different divergeDirection settings create different diverge directions of the diagonal. The diagonal value depends on the value of the cell in the worksheet. You can use the setValue method to set the value of the cell.

Value Type	Description
String	If the cell's value is a string, use a comma(,) to separate the items. However, in this case, the result items do not contain any commas. Example: Cell value: "Year, Product, Region" Result items: ["Year", "Product", "Region"] An empty string before or after a comma is also considered as a valid item. Example: Cell value: "Year, Product, Region," Result items: ["Year", "Product", "Region", " "]
Array	If you want to include commas in input items, set a string array as the cell’s value. If an item of the array is not a string, then the item value will automatically convert to a string. Example: Cell value: sheet.setValue(0, 0, ["Year, Month", "Product", "Region, City"]) Result items: ["Year, Month", "Product", "Region, City"]
CalcArray	If the value of a cell is a CalcArray, the CalcArray flattens into a single array and is treated like an array.
Others	Any other value type is converted to a string for processing.

Note: When the cell value is a string, users can edit the diagonal cell by double-clicking it or through the API and entering the edit mode. In edit mode, the input field and formula textbox will display the text value of the cell. Users can input a comma-separated string to modify the value. However, if the cell's value is an array, it cannot be edited directly in the cell.

Item Display Rules

Item counts	Display rules
Items <= 1	Behaves like a normal text cell.
Items = 2	Divides the cell diagonally.
Items = 3	Fixes the diagonal endpoint at one-third of the cell's length or height.
Items > 3	Divides the cell into equal sections based on the number of items.
Items >= 10	Displays till item index 10 only. Extra items will be ignored.

Diagonal Line Styles

The diagonal cell type uses a default GC.Spread.Sheets.LineBorder('black',GC.Spread.Sheets.LineStyle.thin) to draw the diagonal lines. You can set other line styles to change the appearance of the Diagonal line using the lineBorder method. The effect of the diagonal line style is the same as the border of the cell.

The styles that can be applied to a diagonal cell type include:

background color
foreground color
font
font style
font size
font weight

Text Orientation

The drawing position and the direction of the item texts can vary depending on the number of items. When the number of items is 2 or 3, the first and last items are horizontal, while the middle item is tilted along the diagonal line. However, if the number of items is more than 3, then all items are tilted along the diagonal.

Text Wrapping and Clipping

The diagonal cell supports auto-fitting of both width and height. Auto-fit width adjusts to display all text horizontally in different areas of a diagonal cell, whereas auto-fit height wraps text in triangular areas when it doesn't fit in a single line.

For horizontal items, if the text is out of bounds, it will wrap the text first and then clip the excess text.

Wrap_horizontalItem

For tilted items, if the text is out of bounds, it directly clips overflowing text.

Wrap_tiltedItem

Note: Hard-word wraps (e.g., \n or \r\n) are not supported in diagonal cells.

Right-to-Left Layouts

In a worksheet with a right-to-left layout, the diagonal directions are reversed as:

Diverge direction	Left to right	Right to Left
TopLeftToBottomRight
BottomLeftToTopRight

Refer to the following code sample to set the Diagonal cell type.

sheet.setRowHeight(1, 150);
sheet.setRowHeight(2, 120);
sheet.setColumnWidth(1, 140);

var diagonalCellType = new GC.Spread.Sheets.CellTypes.Diagonal();
diagonalCellType.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.topLeftToButtomRight);
var style = new GC.Spread.Sheets.Style();
style.cellType = diagonalCellType;
style.foreColor = "green";
style.backColor = "#ddebf7";
style.font = "italic normal 15px Mangal";
sheet.setStyle(1, 1, style);
sheet.setValue(1, 1, ["Year", "Month", "Product", "Region, City"]);

var dialognalCellType2 = new GC.Spread.Sheets.CellTypes.Diagonal();
dialognalCellType2.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.bottomLeftToTopRight)
var lineStyle = new GC.Spread.Sheets.LineBorder('red', GC.Spread.Sheets.LineStyle.thick);
dialognalCellType2.lineBorder(lineStyle);
var style1 = new GC.Spread.Sheets.Style();
style1.cellType = dialognalCellType2;
sheet.setStyle(2, 1, style1);
sheet.setValue(2, 1, "Bottom Left,To,Top Right");

Using SpreadJS Designer

You can also set the diagonal cell type using SpreadJS Designer by selecting the Cell Editors > Cell Type > Diagonal option from the Styles group available under the HOME tab.

DiagonalCellType

Use the Value tab of the Diagonal CellType dialog to set cell value types, display item texts, and diverge directions.

DiagonalCellTypeDialog1

Additionally, the Diagonal Style tab of the Diagonal CellType dialog allows you to change the styles of a diagonal line as per the requirements.

DiagonalCellTypeDialog2