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:

The HyperLinkTargetType enumeration has the following options:

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");
                }
            });