SpreadJS Documentation
Using Range Grouping

You can set the display to allow rows or columns to be grouped as an outline according to the headers. This creates a separate area beyond the headers that contains outlines for expanding or collapsing levels of rows or columns. Use the group method to create the range group.

The column group area is above the column headers and the row group area is to the left of the row headers.

The level button and number show the number of levels.  The level button or the icon can be used to expand or collapse the group.

You can display or hide groups with the showRowRangeGroup and showColumnRangeGroup methods. You can use the unGroup method to remove a range group.

Using Code

This example creates a column group and a row group.

JavaScript
Copy Code
activeSheet.isPaintSuspended(true);
activeSheet.setRowCount(34);
activeSheet.setValue(0,0,"Western");
activeSheet.setValue(0,1,"Western");
activeSheet.setValue(0,2,"Western");
activeSheet.setValue(1,0,"A");
activeSheet.setValue(1,1,"B");
activeSheet.setValue(1,2,"C");
activeSheet.setValue(2,0,"A");
activeSheet.setValue(2,1,"B");
activeSheet.setValue(2,2,"C");
activeSheet.rowRangeGroup.group(0,2);
activeSheet.colRangeGroup.group(0,1);
//activeSheet.rowRangeGroup.expand(0,false);
//activeSheet.colRangeGroup.expand(0,false);
activeSheet.isPaintSuspended(false);

Using Code

This example specifies the group direction.

JavaScript
Copy Code
activeSheet.isPaintSuspended(true);
activeSheet.rowRangeGroup.group(3,2);
activeSheet.colRangeGroup.group(4,1);
activeSheet.rowRangeGroup.direction = GcSpread.Sheets.RangeGroupDirection.Backward;
activeSheet.colRangeGroup.direction = GcSpread.Sheets.RangeGroupDirection.Forward;
activeSheet.isPaintSuspended(false);

Using Code

This example specifies an action and uses the doCommand method.

JavaScript
Copy Code
spread.allowUndo(true);
var group = new GcSpread.Sheets.UndoRedo.GroupExtent(3,5);
var action = new GcSpread.Sheets.UndoRedo.RowGroupUndoAction(activeSheet,group);
spread.doCommand(action);

Using Code

This example finds and collapses a group.

JavaScript
Copy Code
activeSheet.isPaintSuspended(true);
activeSheet.rowRangeGroup.group(0,5);
var rgi = activeSheet.rowRangeGroup.find(1, 0);
rgi.setState(GcSpread.Sheets.GroupState.Collapsed);
activeSheet.isPaintSuspended(false);

Using Code

This example sets the showRowRangeGroup and showColumnRangeGroup methods.

JavaScript
Copy Code
activeSheet.isPaintSuspended(true);
activeSheet.showRowRangeGroup(true);
activeSheet.rowRangeGroup.group(0, 2);
activeSheet.showColumnRangeGroup(true);
activeSheet.colRangeGroup.group(0, 2);
//activeSheet.rowRangeGroup.ungroup(0, 2);
//activeSheet.colRangeGroup.ungroup(0, 2);
activeSheet.isPaintSuspended(false);
See Also

 

 


Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.