SpreadJS and Hyperlink Cells

You can quickly access information on a web page with a hyperlink. SpreadJS supports hyperlink cells. This allows you to click on a cell and go to a web site, use an email link, or load a basic web page. A hyperlink cell contains text that functions as a single hyperlink. You can set the color of the hyperlink and change the color after the link has been accessed. You can display text in the cell that is different from the hyperlink. You can also display a tooltip. Clicking the link opens a new page and navigates to the link URL. The hyperlink cell has the following methods:

Method

Description

linkColor

Gets or sets the color of the hyperlink.

linkToolTip

Gets or sets the tooltip for the hyperlink.

target

Gets or sets the type for the hyperlink's target.

text

Gets or sets the text string for the hyperlink.

visitedLinkColor

Gets or sets the color of visited links.

The HyperLinkTargetType enumeration has the following options:

Option

Description

Blank

Opens the hyperlinked document in a new window or tab.

Parent

Opens the hyperlinked document in the parent frame.

Self

Opens the hyperlinked document in the same frame where the user clicked.

Top

Opens the hyperlinked document in the full body of the window.

The following code creates a hyperlink cell.

var cellType = new GcSpread.Sheets.HyperLinkCellType();  
cellType.linkColor("blue");  
cellType.visitedLinkColor("#FF2235");  
cellType.text("GrapeCity");  
cellType.linkToolTip("Company Web Site");  
activeSheet.getCell(1, 1).cellType(cellType).value("http://spread.grapecity.com/");  
activeSheet.getRow(1).height(30);

This example creates a hyperlink cell with a link to a page.

var cellType = new GcSpread.Sheets.HyperLinkCellType();  
cellType.linkColor("blue");  
cellType.visitedLinkColor("#FF2235");  
cellType.text("GrapeCity");  
cellType.linkToolTip("Company Web Site");  
//this page is in the same location as the main page  
activeSheet.getCell(0, 2).cellType(cellType).value("formula.html");

This example creates a hyperlink cell with an email link.

var cellType = new GcSpread.Sheets.HyperLinkCellType();  
cellType.linkColor("blue");  
cellType.visitedLinkColor("#FF2235");  
cellType.text("GrapeCity");  
cellType.linkToolTip("Company Web Site");  
//this sets the address for an email message  
activeSheet.getCell(0, 2).cellType(cellType).value("mailto: example@example.com");  

You can use a button cell instead of a hyperlink cell if you want to change sheets by selecting a cell. For example:

var cellType = new GcSpread.Sheets.ButtonCellType();  
            cellType.text("Sheet 2");  
            activeSheet.getCell(0, 0).cellType(cellType);  

            spread.bind(GcSpread.Sheets.Events.ButtonClicked, function (e, args) {  
                var sheet = args.sheet, row = args.row, col = args.col;  
                var cellType = activeSheet.getCellType(row, col);  
                if (cellType instanceof GcSpread.Sheets.ButtonCellType) {  
                    spread.setActiveSheet("Sheet2");  
                }  
            });