Customization

SpreadJS provides APIs for you to customize the group, including getting and setting the range group's direction, expanding the group, displaying or hiding the range group, and so on.

You can use the showRowOutline or showColumnOutline method to get and set whether to display the range group. For example: If you want to expand or collapse the outline (range group) of the rows or columns, use the expandGroup or expand method (expands all outlines of the specified level). Or you can click the summary button (+, -) to expand or collapse the outline. For example: If you want to get or set the range group's direction (the summary button's position), use the direction method. For example:
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); // set row range group var sd = dataSource; if (sd.length > 0) { sheet.setDataSource(sd); } sheet.setColumnWidth(0, 160); sheet.setColumnWidth(1, 70); sheet.setColumnWidth(2, 90); sheet.setColumnWidth(3, 110); sheet.setColumnWidth(4, 80); sheet.setColumnWidth(6, 110); sheet.rowOutlines.group(1, 15); sheet.rowOutlines.group(1, 4); sheet.rowOutlines.group(6, 4); sheet.rowOutlines.group(11, 4); sheet.columnOutlines.group(1, 3); sheet.columnOutlines.group(1, 2); sheet.resumePaint(); _getElementById("btnGroup").addEventListener('click',function () { var sheet = spread.getActiveSheet(); try { var selections = sheet.getSelections(); if (selections && selections.length > 0) { var cr = selections[0]; if (cr.col == -1 && cr.row == -1) { // sheet selection } else if (cr.col == -1) {// row selection sheet.rowOutlines.group(cr.row, cr.rowCount); sheet.invalidateLayout(); sheet.repaint(); } else if (cr.row == -1) {// column selection sheet.columnOutlines.group(cr.col, cr.colCount); sheet.invalidateLayout(); sheet.repaint(); } else {// cell range selection alert("Please select row or column for group"); } } } catch (ex) { alert(ex.message); } }); _getElementById("btnUngroup").addEventListener('click',function () { var sheet = spread.getActiveSheet(); try { var selections = sheet.getSelections(); if (selections && selections.length > 0) { var cr = selections[0]; if (cr.col == -1 && cr.row == -1) { // sheet selection } else if (cr.col == -1) {// row selection sheet.rowOutlines.ungroupRange(cr.row, cr.rowCount); sheet.invalidateLayout(); sheet.repaint(); } else if (cr.row == -1) {// column selection sheet.columnOutlines.ungroupRange(cr.col, cr.colCount); sheet.invalidateLayout(); sheet.repaint(); } else {// cell range selection alert("Please select row or column for group"); } } } catch (ex) { alert(ex.message); } }); _getElementById("btnShowDetail").addEventListener('click',function () { var sheet = spread.getActiveSheet(); try { var selections = sheet.getSelections(); if (selections && selections.length > 0) { var cr = selections[0]; if (cr.col == -1 && cr.row == -1) { // sheet selection } else if (cr.col == -1) {// row selection for (var i = 0; i < cr.rowCount; i++) { var rgi = sheet.rowOutlines.find(i + cr.row, 0); if (rgi != null) { sheet.rowOutlines.expandGroup(rgi, true); } } sheet.invalidateLayout(); sheet.repaint(); } else if (cr.row == -1) {// column selection for (var i = 0; i < cr.colCount; i++) { var rgi = sheet.columnOutlines.find(i + cr.col, 0); if (rgi != null) { sheet.columnOutlines.expandGroup(rgi, true); } } sheet.invalidateLayout(); sheet.repaint(); } else {// cell range selection alert("Please select row or column for group"); } } } catch (ex) { alert(ex.message); } }); _getElementById("btnHideDetail").addEventListener('click',function () { var sheet = spread.getActiveSheet(); try { var selections = sheet.getSelections(); if (selections && selections.length > 0) { var cr = selections[0]; if (cr.col == -1 && cr.row == -1) { // sheet selection } else if (cr.col == -1) {// row selection for (var i = 0; i < cr.rowCount; i++) { var rgi = sheet.rowOutlines.find(i + cr.row, 0); if (rgi != null) { sheet.rowOutlines.expandGroup(rgi, false); } } sheet.invalidateLayout(); sheet.repaint(); } else if (cr.row == -1) {// column selection for (var i = 0; i < cr.colCount; i++) { var rgi = sheet.columnOutlines.find(i + cr.col, 0); if (rgi != null) { sheet.columnOutlines.expandGroup(rgi, false); } } sheet.invalidateLayout(); sheet.repaint(); } else {// cell range selection alert("Please select row or column for group"); } } } catch (ex) { alert(ex.message); } }); _getElementById("row_summary").addEventListener('click',function () { var sheet = spread.getActiveSheet(); var checked = this.checked; if (checked) { sheet.rowOutlines.direction(spreadNS.Outlines.OutlineDirection.forward); } else { sheet.rowOutlines.direction(spreadNS.Outlines.OutlineDirection.backward); } sheet.invalidateLayout(); sheet.repaint(); }); _getElementById("col_summary").addEventListener('click',function () { var sheet = spread.getActiveSheet(); var checked = this.checked; if (checked) { sheet.columnOutlines.direction(spreadNS.Outlines.OutlineDirection.forward); } else { sheet.columnOutlines.direction(spreadNS.Outlines.OutlineDirection.backward); } sheet.invalidateLayout(); sheet.repaint(); }); _getElementById("rowGroup_visibility").addEventListener('click',function () { var sheet = spread.getActiveSheet(); sheet.showRowOutline(this.checked); }); _getElementById("colGroup_visibility").addEventListener('click',function () { var sheet = spread.getActiveSheet(); sheet.showColumnOutline(this.checked); }); }; function _getElementById(id){ return document.getElementById(id); }
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/data.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 class="options-container"> <div class="option-row"> <p class="desc">Use these options to change group settings in the highlighted range</p> </div> <div class="option-row"> <input type="button" value="Group" id="btnGroup" /> <input type="button" value="Ungroup" id="btnUngroup" /> <input type="button" value="Show Detail" id="btnShowDetail" /> <input type="button" value="Hide Detail" id="btnHideDetail" /> </div> <div class="option-row"> <input type="checkbox" id="row_summary" checked /> <label for="row_summary">Summary Rows Below Details</label> </div> <div class="option-row"> <input type="checkbox" id="col_summary" checked /> <label for="col_summary">Summary Columns Right Detail</label> </div> <div class="option-row"> <input type="checkbox" id="rowGroup_visibility" checked /> <label for="rowGroup_visibility">Show Row Range Group</label> </div> <div class="option-row"> <input type="checkbox" id="colGroup_visibility" checked /> <label for="colGroup_visibility">Show Column Range Group</label> </div> </div> </div> </body> </html>
label { display: inline-block; width: 210px; } input[type="button"] { padding: 4px 6px; width: 100%; margin-bottom: 10px; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; /*margin-top: 10px;*/ } .desc { padding: 2px 10px; background-color: lavender; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }