Set Cell Context

Context is a very important concept in ReportSheet. It affects report layout because it filters the data in child cells in all contexts by default, and all child cells are repeated with the context. To set the context in the template cell, use the contextproperty of the setTemplateCell method of the Spread.Report.TemplateSheet class.

You can have two contexts for a single cell:

• Vertical context: Here, the cell uses the vertical spill direction cell on the left as the vertical context.

• Horizontal context: Here, the cell uses the horizontal spill direction cell on the top as the horizontal context.

Note: If a cell has both vertical context and horizontal context, it will be a cross-cell and is used to generate a cross-report.

A template cell may behave differently based on the context values.

Note: If both the horizontal and vertical context values of a cell are set to Default or Undefined and unable to find left for vertical context and up for horizontal context, then the cell uses the root node of the hierarchy as its vertical or horizontal context.

Steps to set the context in TemplateSheet:

1. Define the table source in the DataManager.

2. Configure the type and binding options in the template cell.

3. Set the contextproperty value in the template cell.

You can use the following code samples to set the vertical and horizontal context for the cell.

// Set vertical context as a cell.
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    context: {
        vertical: 'A1',
    },
});
// Set vertical context as none.
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    context: {
        vertical: 'None',
    },
});

// Set horizontal context as a cell.
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    spillDirection: 'Horizontal',
    context: {
        horizontal: 'A1',
    },
});
// Set horizontal context as a none.
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    spillDirection: 'Horizontal',
    context: {
        horizontal: 'None',
    },
});

// Set both vertical and horizontal context for a cell.
templateSheet.setTemplateCell(1, 1, {
    type: 'Summary',
    aggregate: 'Sum',
    binding: `Sales[Sales]`,
    context: {
        vertical: 'A2',
        horizontal: 'B1',
    },
});

Let's have a look at how to set cell context with some specific examples.

Example 1: Set Vertical Context to None

In the example below, two cells, A2 and B2, are configured as group cells. Cell A2 is bound to the CustomerId field in the Orders data table. On the other hand, B2 is another group cell that is bound to the EmployeeId field. Additionally, B2 cell's vertical context is set to None. Therefore, the A2 and B2 cells do not affect each other and spill their data vertically.

templateSheet.setTemplateCell(1, 0, {  // cell A2
     type: 'Group',
     binding: 'Orders[CustomerId]'
});
templateSheet.setTemplateCell(1, 1, {  // cell B2
     type: 'Group',
     binding: 'Orders[EmployeeId]',
     context: {
         vertical: 'None'
     }
})
reportSheet.refresh();

The output of the above code will look like below.

Example 2: Set Vertical Context to Default

In the following example, two cells A2 and C2 are configured as group cells. Cell A2 is bound to the CustomerId field in the Orders data table. However, C2 is bound to the EmployeeId field. In this case, the vertical context is not set (undefined) for the template cells, so it uses the vertical spill cell on the left as its vertical context. Here, it is cell A2.

templateSheet.setTemplateCell(1, 0, {  // cell A2
     type: 'Group',
     binding: 'Orders[CustomerId]'
});
templateSheet.setTemplateCell(1, 2, {  // cell C2
     type: 'Group',
     binding: 'Orders[EmployeeId]'
})
reportSheet.refresh();

The output of the above code will look like below.

Example 3: Set Vertical Context to Cell Name

In the example below, two cells, A2 and B3, are configured as group cells. Cell A2 is bound to the CustomerId field in the Orders data table. On the other hand, cell B3 is bound to the EmployeeId field, and the vertical context of this cell is set as A2 (cell name). When the vertical context of a template cell is a cell name, it will follow that specified cell as its vertical context. Therefore, here, B3 cell will refer to the A2 cell as its vertical context.

templateSheet.setTemplateCell(1, 0, {  // A2
          type: 'Group',
          binding: 'Orders[CustomerId]'
});
templateSheet.setTemplateCell(2, 1, {  // B3
          type: 'Group',
          binding: 'Orders[employeeId]',
          context: {
              vertical: 'A2',
          }
})
reportSheet.refresh();

The output of the above code will look like below.