SpreadJS 14
Features / Group / Range Groups
In This Topic
    Range Groups
    In This Topic

    SpreadJS provides the ability to display the rows or columns 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.

    The Level Number button shows the number of levels at which the outline exists. The Level Number buttons or the expand or collapse icon can be used to expand or collapse the group.

    Range grouping

    The appearance of range groups can be modified by using different CSS classes. For more information, refer to Customize Range Groups.

    Create Row or Column Group

    The group method of Outline class can be used to create a range group while the unGroup method can be used to remove the range group. The following image shows a row and column group.

    Hiding range groups

     

    Refer to the following example code to create a row and column group.

    JavaScript
    Copy Code
    activeSheet.setRowCount(34);
    // Set cell values
    activeSheet.setValue(0,0,"Product");
    activeSheet.setValue(0,1,"2019 in Sales");
    activeSheet.setValue(0,2,"2020 in Sales");
    activeSheet.setValue(1,0,"Mobiles");
    activeSheet.setValue(1,1,"350,000");
    activeSheet.setValue(1,2,"500,000");
    activeSheet.setValue(2,0,"Laptops");
    activeSheet.setValue(2,1,"200,000");
    activeSheet.setValue(2,2,"400,000");
    // Set row and column groups
    activeSheet.rowOutlines.group(1,2);
    activeSheet.columnOutlines.group(1,2);
    //activeSheet.rowOutlines.expand(0,false);
    //activeSheet.columnOutlines.expand(0,false);
    spread.invalidateLayout();
    spread.repaint();
    

    Alternatively, you can specify the command outlineRow or outlineColumn and use the execute method to create row or column groups.

    JavaScript
    Copy Code
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    spread.commandManager().execute({cmd: "outlineRow", sheetName: activeSheet.name(), index: 4, count: 3}); // Specifying action and using execute method
    

    Note: The outline column feature can also be used to create a tree-like structure in a spreadsheet for better organization of data. For more information, refer to Outline Columns.

    Set Group Direction

    You can specify the direction of range group as forward or backward using the OutlineDirection enumeration in direction option.

    Forward Direction Backward Direction 
    Forward direction in range group Backward direction in range group

    Refer to the following example code to set the direction of a row and column group.

    JavaScript
    Copy Code
    activeSheet.rowOutlines.group(1,2);
    activeSheet.columnOutlines.group(1,2);
    activeSheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);
    activeSheet.columnOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.forward);
    spread.invalidateLayout();
    spread.repaint();
    

    Find and Collapse Groups

    You can find and collapse or expand a group by using OutlineState option.

    JavaScript
    Copy Code
    activeSheet.rowOutlines.group(0,5);
    var rgi = activeSheet.rowOutlines.find(1, 0);
    rgi.state(GC.Spread.Sheets.Outlines.OutlineState.collapsed); // Find and collapse a group
    spread.invalidateLayout();
    spread.repaint();
    

    Display Outlines in Sheet

    You can specify whether to display the row and column outline using showRowOutline and showColumnOutline methods. These methods return the boolean values to indicate whether the outline is displayed, if no value is set.

    JavaScript
    Copy Code
    // Set showRowOutline and showColumnOutline activeSheet.showRowOutline(true);
    activeSheet.rowOutlines.group(0, 2);
    activeSheet.showColumnOutline(true);
    activeSheet.columnOutlines.group(0, 2);
    //activeSheet.rowOutlines.ungroup(0, 2);
    //activeSheet.columnOutlines.ungroup(0, 2);
    spread.invalidateLayout();
    spread.repaint();
    
    See Also