Setting the Default Row Height in JavaScript

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.
3. Change Row Height Later (Optional)

Getting Started:

Initialize the grid

We create a standard Wijmo FlexGrid and then directly modify the rows.defaultSize property on the grid instance to control row height.

<div id="theGrid"></div>

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

const data = getData();

const grid = new wjcGrid.FlexGrid('#theGrid', {
  itemsSource: data,
  autoGenerateColumns: true
});

...

function getData() {
  return [
    { id: 1, name: 'Item 1', sales: 120 },
    { id: 2, name: 'Item 2', sales: 240 },
    { id: 3, name: 'Item 3', sales: 360 }
  ];
}

• The grid is initialized with an itemsSource.

Set the rows.defaultSize property to the desired height

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

const data = getData();

const grid = new wjcGrid.FlexGrid('#theGrid', {
  itemsSource: data,
  autoGenerateColumns: true
});

// Set default row height (in pixels)
grid.rows.defaultSize = 40;

function getData() {
  return [
    { id: 1, name: 'Item 1', sales: 120 },
    { id: 2, name: 'Item 2', sales: 240 },
    { id: 3, name: 'Item 3', sales: 360 }
  ];
}

• After initialization, we set grid.rows.defaultSize = 40.
• All rows immediately update to the new height.

Change Row Height Later (Optional)

If you need to modify row height dynamically, for example, in response to user interaction, simply update the defaultSize property again.

function increaseRowHeight() {
  grid.rows.defaultSize = 60;
}

• Calling this function updates all row heights instantly.
• No grid reinitialization is required.

With this JavaScript setup:

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

Happy coding!