Setting the Default Row Height in Angular

Background:

The default size for row cells may not meet some user's requirements or the size keeps reverting to a size that they don't want. There is a property that can be adjusted to meet those needs.

Steps to Complete:

1. Initial the grid

2. Set the defaultSize property

Getting Started:

Initialize the grid

Start by initializing your grid by using the initialized event. Within this event you can set the default properties for your grid when it initially loads.

<!-- app.component.html -->
<wj-flex-grid #grid [itemsSource]="data" (initialized)="initGrid(grid)"> </wj-flex-grid>

// app.component.ts
initGrid(grid: wjGrid.FlexGrid) {
    // Initialization of the grid
}

Set the defaultSize property

You can set the default size for all the rows using defaultSize property of the RowCollection class.

grid.rows.defaultSize = 40

Then set this property within the initialize event:

initGrid(grid: wjGrid.FlexGrid) {
    grid.rows.defaultSize = 40; // set the default size for grid rows
}

Additionally, you can continue to change the row height at a later stage with the defaultSize property whenever needed.

Hope this article is helpful and if you would like to see this example application code, please click here.

Happy coding!