Setting the Default Row Height in Vue

Background:

FlexGrid computes row heights based on font size and cell padding by default. If that default row height doesn’t meet your needs, you can easily adjust it by setting the defaultSize property on the grid’s rows collection, either during initialization or at runtime. This allows you to control how tall every row should be.

Steps to Complete:

1. Initialize the grid.
2. Set the rows.defaultSize property to the desired height.

Getting Started:

Initialize the grid

We set up a standard Wijmo FlexGrid and capture the grid instance using a Vue ref. Once the component is mounted, we modify the row settings directly on the underlying control.

<template>
  <div class="container-fluid">
    <wj-flex-grid
      ref="grid"
      :itemsSource="data"
      :autoGenerateColumns="true"
    />
  </div>
</template>

<script>
import { WjFlexGrid } from '@mescius/wijmo.vue2.grid';

export default {
  components: { WjFlexGrid },

  data() {
    return {
      data: this.getData()
    };
  },

  mounted() {
    const grid = this.$refs.grid.control;

    ...

  methods: {
    getData() {
      return [
        { id: 1, name: 'Item 1', sales: 120 },
        { id: 2, name: 'Item 2', sales: 240 },
        { id: 3, name: 'Item 3', sales: 360 }
      ];
    }
  }
};
</script>

• We use ref="grid" to access the underlying FlexGrid control.

Set the rows.defaultSize property to the desired height

Inside mounted(), we set grid.rows.defaultSize to 40 (or any pixel value).

 mounted() {
    const grid = this.$refs.grid.control;

    if (grid) {
      // Set default row height
      grid.rows.defaultSize = 40;
    }
  },

• This immediately updates the height of all rows.

Change Row Height Later (Optional)

If you want to modify row height dynamically, for example, based on user interaction, simply update defaultSize at runtime.

methods: {
  increaseRowHeight() {
    const grid = this.$refs.grid.control;
    if (grid) {
      grid.rows.defaultSize = 60;
    }
  }
}

• Calling this method adjusts row height immediately.
• No grid reinitialization is required.

With this Vue setup:

• All rows use your specified pixel height (e.g., 40px).
• You can dynamically adjust row height at runtime.
• This is useful when accommodating larger content, custom cell layouts, or improved readability.

Happy coding!