Using CellTypes in Grouping

In SpreadJS, you can add different cell types to grouped columns. For example, you can add a HyperLink cell type to a grouped column, allowing users to click on a hyperlink cell type to navigate to a particular page.

Hyperlink_TSGrouping

Note: Cell types can only be applied to grouped columns under the tabular grouping layout only.

To create a hyperlink in a grouped column, define a HyperLink cell type and assign it to that column. The following sample code adds grouping information that uses the hyperlink cell type and disables sorting and filtering by values or lists.

var spread, sheet;
$(document).ready(function () {
    // Initialize Spread.
    spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 0 });
    spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;

    // Initialize a data manager.
    var dataManager = spread.dataManager();
    var myTable = dataManager.addTable("myTable", {
        remote: {
            read: {
                url: 'https://demodata.grapecity.com/wwi/api/v1/stockItems'
            }
        },
        schema: {
            columns: {
                validFrom: { dataType: "date" }
            }
        }
    });

    // Initialize a tablesheet.
    sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
    h = new GC.Spread.Sheets.CellTypes.HyperLink();
    h.linkToolTip('This is the link to SpreadJS site');
    spread.commandManager().register('setSheetTabStyle', {
        canUndo: true,
        execute: function (context, options, isUndo) {
           alert("Clicked");
        }
    }, null, false, false, false, false);
    h.onClickAction(() => {
        spread.commandManager().execute({ cmd: 'setSheetTabStyle' });
    });

    // Bind a view to the tablesheet.
    myTable.fetch().then(function () {
        var view = myTable.addView("myView", [
            { value: "stockItemKey", width: 150, caption: "Stock Item Key" },
            { value: "stockItem", width: 120, caption: "Stock Item" },
            { value: "buyingPackage", width: 120, caption: "Buying Package" },
            { value: "sellingPackage", width: 120, caption: "Selling Package" },
            { value: "unitPrice", width: 150, caption: "Unit Price" },
            { value: "taxRate", width: 120, caption: "Tax Rate" },
            { value: "validFrom", width: 200, caption: "Valid From" }
        ]);
        sheet.setDataView(view);
    });
});

function grouping() {
    // Create groupBy by single field (Selling package), with summary fields and slice fields.
    sheet.groupBy([
        {
            caption: "Selling Package", field: "sellingPackage", width: 150, style: { backColor: "#F9CA9A" }, style: { cellType: h },
            allowSort: false,
            allowFilterByValue: false,
            allowFilterByList: false,
            summaryFields: [
                {
                    caption: "SUM(Unit Price)",
                    formula: "=SUM([unitPrice])",
                    slice: { field: "=YEAR([@validFrom])", width: 120, style: { backColor: "#FCE3CA", formatter: "#,##0.00" } },
                    width: 150,
                    style: { backColor: "#FAD7B2", formatter: "#,##0.00" }
                }
            ]
        }
    ]);
}