Adding FlexSheet Cell Borders in Angular

Background:

To set a cell border in Wijmo FlexSheet, you can use the applyCellsStyle method. This method takes a cell style object and a cell range as parameters. In Angular, you can wire this up from a button handler or from a selection event.

Steps to Complete:

1. Define a cell style object with border properties.
2. Create a CellRange to specify the cells where the border will be applied.
3. Call applyCellsStyle on the FlexSheet instance with the style and range.

Getting Started:

Define a cell style object with border properties

This creates an object that defines specific border attributes (color, style, width) for the sides of a cell.

// Define a border style
const borderStyle = {
  borderRightColor: 'red',
  borderRightStyle: 'Solid',
  borderRightWidth: '1px'
};

• You can adjust properties like borderTopColor, borderBottomStyle, etc., to control different sides of the border.

Create a CellRange to specify the cells where the border will be applied

This specifies the area of the sheet to which the style will be applied. You can use the FlexSheet’s selection to build this range.

import * as wjcGrid from '@mescius/wijmo.grid';

// Get the selected range from the sheet
const sel = this.flexSheet.selection;

// Build a range covering the selection
const borderRange = new wjcGrid.CellRange(
  sel.topRow,
  sel.leftCol,
  sel.bottomRow,
  sel.rightCol
);

• A CellRange defines the top/left and bottom/right coordinates of the range.

Call applyCellsStyle on the FlexSheet instance with the style and range

This calls the FlexSheet’s applyCellsStyle method with the previously defined style and range, rendering the borders visibly in the UI.

// Apply the border style to the selected range
this.flexSheet.applyCellsStyle(borderStyle, [borderRange]);

File for Context

import { Component, ViewChild } from '@angular/core';
import * as wjcSheet from '@mescius/wijmo.grid.sheet';
import * as wjcGrid from '@mescius/wijmo.grid';

@Component({
  selector: 'app-border-example',
  template: `
    <button (click)="addBorders()">Add Borders</button>
    <wj-flex-sheet
      #flexSheet
      [itemsSource]="data">
    </wj-flex-sheet>
  `
})
export class BorderExampleComponent {
  @ViewChild('flexSheet', { static: true }) flexSheet: wjcSheet.FlexSheet;
  data = getDemoData();

  addBorders() {
    // 1) Define border style
    const borderStyle = {
      borderRightColor: 'red',
      borderRightStyle: 'Solid',
      borderRightWidth: '1px'
    };

    // 2) Create a cell range from selection
    const sel = this.flexSheet.selection;
    const borderRange = new wjcGrid.CellRange(
      sel.topRow,
      sel.leftCol,
      sel.bottomRow,
      sel.rightCol
    );

    // 3) Apply it
    this.flexSheet.applyCellsStyle(borderStyle, [borderRange]);
  }
}

function getDemoData() {
  return [
    { A: 'Apple', B: 'Banana', C: 'Cherry' },
    { A: 'Apricot', B: 'Blueberry', C: 'Cranberry' },
    // …
  ];
}

With this Angular setup, you can apply custom borders to any selected range inside a FlexSheet cell area. This allows you to visually highlight cells or cell groups with border effects just like in an Excel spreadsheet.

Happy coding!