Adding FlexSheet Cell Borders in Vue

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 Vue, you can wire this up from a button click handler or based on the current selection in the FlexSheet.

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.

const borderStyle = {
  borderRightColor: 'red',
  borderRightStyle: 'Solid',
  borderRightWidth: '1px'
};

• You can also use borderTopColor, borderBottomStyle, borderLeftWidth, etc., to control borders on different sides of the cell.

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. The range is typically derived from the FlexSheet’s current selection.

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

// Get the current selection
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 rectangular area (top/left to bottom/right) where the style will be applied.

Call applyCellsStyle on the FlexSheet instance with the style and range

This calls the FlexSheet’s applyCellsStyle method using the style object and range, which visually renders the borders in the UI.

this.flexSheet.applyCellsStyle(borderStyle, [borderRange]);

Complete file for reference

<template>
  <div>
    <button @click="addBorders">Add Borders</button>
    <wj-flex-sheet
      ref="flexSheet"
      :itemsSource="data"
      @initialized="onSheetInitialized"
    />
  </div>
</template>

<script>
import * as wjcSheet from '@mescius/wijmo.grid.sheet';
import * as wjcGrid from '@mescius/wijmo.grid';
import { WjFlexSheet } from '@mescius/wijmo.vue2.grid.sheet';

export default {
  components: { WjFlexSheet },
  data() {
    return {
      data: getDemoData(),
      flexSheet: null
    };
  },
  methods: {
    onSheetInitialized(sheet) {
      this.flexSheet = sheet;
    },
    addBorders() {
      if (!this.flexSheet) return;

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

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

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

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

With this Vue setup, you can apply custom borders to any selected range within a FlexSheet, allowing you to visually highlight or separate data just like in a spreadsheet application.

Happy coding!