row height

This is a demo of how to specify the height of a row and how to change the height of the row to fit the data.

Specifying row height

The height of the fixed row is specified by displayOptions.rowHeight.

var height = gridView.displayOptions.rowHeight;
gridView.displayOptions.rowHeight = height + 10;
 
var height = gridView.displayOptions.rowHeight;
gridView.displayOptions.rowHeight = height - 10;

Changing the height of rows variably according to data

When the data content is long and you want to automatically display it in multiple lines to fit the column width, you can apply CSS white-space to column.styleName. When CSS is applied, only data is displayed in multiple lines to fit the column width, and the row height does not automatically increase. In this case, you can specify displayOptions.rowHeight = -1. And for single-row data, if the automatically adjusted height feels too low, specify an appropriate value for displayOptions.minRowHeight.

.realgrid-pre-wrap{
   white-space: pre-wrap;
}

var columns = [
...skip...
{
   name: "KorCountry",
   fieldName: "KorCountry",
   width: "100",
   header: {
     text: "Investment country"
   },
   styleName: "realgrid-pre-wrap"
}
...skip...
];
 
gridView.setColumns(columns);

When outputting to Excel, only the rowHeight -1 property is applied. (Excel dynamic row height and minimum height cannot be applied simultaneously)

gridView.displayOptions.rowHeight = -1;
gridView.displayOptions.minRowHeight = 36;