Adding Bullet Points to Cells in FlexSheet in JavaScript

Background

You can add bullet points to specific FlexSheet cells by registering a custom function with the addFunction method. This lets you apply bullets through a formula, such as =customBulletFunc(B3), instead of modifying every selected cell.

The custom function reads the value from a referenced cell and returns the text prefixed with a bullet character.

Steps to Complete

1. Add the required scripts and styles.
2. Create the FlexSheet control.
3. Define the custom bullet function.
4. Register the function with FlexSheet.
5. Apply the formula to a cell.

Getting Started

Add the required scripts and styles

<link
    href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css"
    rel="stylesheet"
>

<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.xlsx.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.sheet.min.js"></script>

• These files load the Wijmo stylesheet, FlexSheet, and its dependencies from the Mescius CDN.

Create the FlexSheet control

<div id="flexSheet" style="height: 400px;"></div>

<script>
    const flexSheet = new wijmo.grid.sheet.FlexSheet('#flexSheet');

    flexSheet.addUnboundSheet('Bullet Example', 20, 10);
</script>

• The FlexSheet constructor attaches the control to the container. The addUnboundSheet method creates a worksheet with 20 rows and 10 columns.

Define the custom bullet function

function bulletFunc(cellValue) {
    return '\u2022\u00A0\u00A0' + cellValue[0];
}

• For the single-cell reference used in this example, cellValue[0] retrieves the source value. The function adds a Unicode bullet (\u2022) followed by two nonbreaking spaces (\u00A0).

Register the function with FlexSheet

flexSheet.addFunction(
    'customBulletFunc',
    bulletFunc,
    'Adds a bullet point to a referenced cell value.',
    1,
    1
);

• The first argument defines the formula name, and the second supplies the callback. The description explains the function’s purpose. The final two arguments specify that the function accepts exactly one argument.

Apply the formula to a cell

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

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

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

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

Happy coding!