Custom

Users can customize actions by passing a self-defined option with icons, iconSelector, tooltip, shortcutKey and command.

Description
app.js
index.html
styles.css
Copy to CodeMine

You can get the row action options using the tableSheet.rowActionOptions() method.

You can customize it using tableSheet.rowActionOptions(rowActionOptions), where rowActionOptions includes the following:

Operation Type Description
name string The name of the option
icons (string | GC.Spread.Sheets.ButtonImageType)[] An icon that indicates the different statuses
iconSelector (item: any, index: number) => number | boolean Select a icon according to different status
tooltip string the tooltip for the row action
command string the name of the command when clicking the row action
shortcutKey GC.Spread.Sheets.TableSheet.IShortcutKey the shortcut key of the command for the row action

Adding a row action for having a comment can be done with the following code:

let options = tableSheet.rowActionOptions();
options.push({
    icons: ["./comment.png"],
    iconSelector: (item) => {
        return item.comment ? item.comment.length > 0 : false;
    }
});
tableSheet.rowActionOptions(options);

Adding a row action for showing a comment can be done as follows:

const ShowComment = "ShowComment";
let Commands = GC.Spread.Sheets.Commands;
    Commands[ShowComment] = {
        canUndo: false,
        execute: function (context, options) {
            alert(options.item.Comments);
            return true;
        }
    };
let options = tableSheet.rowActionOptions();
options.push({
    icons: ["./comment.png"],
    tooltip: "Show the comment",
    shortcutKey: { key: 65 /* A */, ctrl: true, alt: true },
    command: ShowComment
});
tableSheet.rowActionOptions(options);

Specify a command to the default first row action as follows:

// Get the default first row action
let options = tableSheet.rowActionOptions();
let defaultFirstRowAction = options[0];
// Specify a command to the default first row action
defaultFirstRowAction.command = GC.Spread.Sheets.TableSheet.BuiltInRowActions.pinRow.command;
// set row action options
tablesheet.rowActionOptions(options);
You can get the row action options using the tableSheet.rowActionOptions() method. You can customize it using tableSheet.rowActionOptions(rowActionOptions), where rowActionOptions includes the following: Operation Type Description name string The name of the option icons (string | GC.Spread.Sheets.ButtonImageType)[] An icon that indicates the different statuses iconSelector (item: any, index: number) => number | boolean Select a icon according to different status tooltip string the tooltip for the row action command string the name of the command when clicking the row action shortcutKey GC.Spread.Sheets.TableSheet.IShortcutKey the shortcut key of the command for the row action Adding a row action for having a comment can be done with the following code: Adding a row action for showing a comment can be done as follows: Specify a command to the default first row action as follows:
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var tableName = "Employee"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var sheet; var ShowComment = "ShowComment"; var CheckRow = "CheckRow"; var checkMap = {}; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); //register self-defined row action command registerCommands(); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); spread.clearSheets(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; //init a data manager var dataManager = spread.dataManager(); var myTable = dataManager.addTable("myTable", { remote: { read: { url: apiUrl }, update: { url: apiUrl, method: 'PUT' }, create: { url: apiUrl }, delete: { url: apiUrl } }, autoSync: true }); //init a table sheet sheet = spread.addSheetTab(0, "MyTableSheet", GC.Spread.Sheets.SheetType.tableSheet); var options = sheet.rowActionOptions(); // Specify a command to the default first row action var defaultFirstRowAction = options[0]; defaultFirstRowAction.command = GC.Spread.Sheets.TableSheet.BuiltInRowActions.pinRow.command; //add a action of check/uncheck options.push({ name: 'check', icons: ["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8L3N2Zz4K", "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8cGF0aCBkPSJNNS4yNSA5TDIgNS42MTI5TDMuMDA3MTQgNC41NjMyOEw1LjI1IDYuODkzM0w4Ljk4NTcxIDNMMTAgNC4wNDk2M0w1LjI1IDlINS4yNVoiIGZpbGw9IiM2NjY2NjYiLz4KPC9zdmc+Cg=="], tooltip: "Check/Uncheck", iconSelector: function (item) { return !!checkMap[item.Id]; }, command: CheckRow }); //show the comment flag if the data has a comment options.push({ name: 'comment', icons: ["./image/comment.png"], tooltip: "Show the comment", iconSelector: function (item) { return item.Notes ? item.Notes.length > 0 : false; }, shortcutKey: { key: 65 /* A */, ctrl: true, alt: true }, command: ShowComment }); //show the attachment flag if the data has a attachment options.push({ name: 'attachment', icons: ["./image/attachment.png"], tooltip: "Attachment", iconSelector: function (item) { return item.PhotoPath ? item.PhotoPath.length > 0 : false; } }); sheet.rowActionOptions(options); //bind a view to the table sheet myTable.fetch().then(function () { var view = myTable.addView("myView", [ { value: "Id", width: 50, caption: "ID" }, { value: "FirstName", width: 100, caption: "First Name" }, { value: "LastName", width: 100, caption: "Last Name" }, { value: "HomePhone", width: 150, caption: "Phone" }, { value: "PhotoPath", width: 150, caption: "Attachment" }, { value: "Notes", width: 400, caption: "Comments" }, ]); sheet.setDataView(view); }); spread.resumePaint(); } function registerCommands() { var Commands = GC.Spread.Sheets.Commands; Commands[ShowComment] = { canUndo: false, execute: function (context, options) { alert(options.item.Notes); return true; } }; Commands[CheckRow] = { canUndo: false, execute: function (context, options) { var id = options.item.Id; checkMap[id] = !checkMap[id]; return true; } }; } function getProperty(domId, prop) { return document.getElementById(domId)[prop]; } function setProperty(domId, prop, value) { document.getElementById(domId)[prop] = value; } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; }