SpreadJS 14
Features / Shapes / Group Shapes
In This Topic
    Group Shapes
    In This Topic

    SpreadJS provides support for adding and customizing group shapes in the worksheets.

    Typically, group shapes are generated when multiple drawing objects are clustered together in a spreadsheet. It is ideal to use group shapes in a scenario wherein users need to manage an integrated process quickly and efficiently while also optimizing the entire execution process of similar kind of tasks (like adding similar kind of style to two or more shapes, rotating or moving them together). This will not only save a considerable amount of time and efforts but will also help you in ensuring that the desired consistency in all the shapes is maintained. 

    Example

    For instance, let's say you want to apply a similar kind of shape fill effect or simply want to rotate or move two or more shapes inserted in a worksheet. One way to do this would be - applying styles to every shape individually. However, this task can become too cumbersome and time consuming to handle. Instead, you can simply group all the shapes in the worksheet and apply the fill effect or rotation to the grouped shape.

    An example screenshot of a group shape is shown below.

    Group shape in a worksheet

    You can also ungoup the grouped shapes as and when you want.

    Using Code

    This example shows how to add group shapes in the worksheets.

    JavaScript
    Copy Code
    window.onload = function ()
    {
      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
      var sheet = spread.getActiveSheet();
      // Add the shapes that you want to group
      var shape1 = sheet.shapes.add
      ("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.isoscelesTriangle,
      150, 100, 100, 100);
      var shape2 = sheet.shapes.add
      ("myShape2", GC.Spread.Sheets.Shapes.AutoShapeType.oval,
      300, 100, 100, 100);               
    
      // Grouping Shapes
      var groupShape = sheet.shapes.group([shape1, shape2]);
      groupShape.isSelected(true);
      
      // Rotate the grouped shape
      groupShape.rotate(340);
      // If you want to ungroup the grouped shapes, you can use the following code: 
      // sheet.shapes.ungroup(groupShape);
    };
      
    

     

    Note: SpreadJS doesn't support the following scenarios while integrating group shapes:

    • Only the multi-selection behavior of shapes for group shapes is supported. All other UI actions only support single shape. Also, group shapes does not support custom padding.