Adding Bullet Points to FlexSheet Cells in Angular

Background

You can add bullet points to specific FlexSheet cells by registering a custom formula with the addFunction method. For example, entering =customBulletFunc(B3) in B2 displays the value of B3 prefixed with a bullet.

Steps to Complete

1. Install the Wijmo packages.
2. Add the Wijmo stylesheet.
3. Configure the Angular component.
4. Add FlexSheet to the template.
5. Define and register the custom function.
6. Populate the source cell and apply the formula.

Getting Started

Install the Wijmo packages

npm install @mescius/wijmo @mescius/wijmo.grid @mescius/wijmo.grid.sheet @mescius/wijmo.angular2.grid.sheet @mescius/wijmo.styles

• These packages provide the Wijmo core library, FlexGrid, FlexSheet, Angular components, and styles. Angular applications reference these packages through imports instead of CDN script tags.

Add the Wijmo stylesheet

@import '@mescius/wijmo.styles/wijmo.css';

• This stylesheet provides the default appearance for FlexSheet, including its cells, headers, and sheet tabs.

Configure the Angular component

import { Component } from '@angular/core';
import { WjGridSheetModule } from '@mescius/wijmo.angular2.grid.sheet';
import { FlexSheet } from '@mescius/wijmo.grid.sheet';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WjGridSheetModule],
  templateUrl: './app.component.html'
})
export class AppComponent {
  initializeFlexSheet(sheet: FlexSheet): void {
    // Register the custom function and populate cells here.
  }
}

• WjGridSheetModule makes the FlexSheet Angular components available in the template. The FlexSheet import supplies the type for the initialization handler.

Add FlexSheet to the template

<wj-flex-sheet
  #flexSheet
  style="height: 400px;"
  (initialized)="initializeFlexSheet(flexSheet)">
  <wj-sheet
    name="Bullet Example"
    [rowCount]="20"
    [columnCount]="10">
  </wj-sheet>
</wj-flex-sheet>

• The wj-flex-sheet component displays the control. Its child wj-sheet creates an unbound worksheet containing 20 rows and 10 columns.

Define and register the custom function

initializeFlexSheet(sheet: FlexSheet): void {
  sheet.addFunction(
    'customBulletFunc',
    this.bulletFunc,
    'Adds a bullet point to a referenced cell value.',
    1,
    1
  );
}

private bulletFunc(cellValue: unknown[]): string {
  return '\u2022\u00A0\u00A0' + cellValue[0];
}

• For the single-cell reference used in this example, cellValue[0] retrieves the source value. The callback prefixes it with a Unicode bullet (\u2022) and two nonbreaking spaces (\u00A0).
• The addFunction method registers the formula name and callback. Its final two arguments specify that the function requires exactly one argument.
• To use =li(B3), change the registered name from customBulletFunc to li.

Populate the source cell and apply the formula

// Store the source text in B3.
sheet.setCellData(
  2,
  1,
  'This cell text is marked with a bullet'
);

// Display the bulleted result in B2.
sheet.setCellData(1, 1, '=customBulletFunc(B3)');

• setCellData uses zero-based row and column indexes, so (2, 1) identifies B3 and (1, 1) identifies B2.

B2 displays:

•  This cell text is marked with a bullet

• The formula must reference a different cell from the cell containing it. Entering =customBulletFunc(B2) in B2 creates a circular reference and results in an error.

With this setup, you can add bullet points to specific FlexSheet cells in Angular using a custom formula while preserving the source text in a separate cell.

Happy coding!