Layout Specifics in Blazor Grid
- 7 minutes to read
The Grid layout depends on the component’s total width, column widths, borders, and cell spacing. The examples below demonstrate how the component is rendered in different scenarios.
All Column Widths Are Unspecified
If you do not specify column widths, the Grid renders columns with equal widths (but not less than the MinWidth value) and wraps content if needed. If a column’s MinWidth value is greater than the calculated column width, the Grid applies the specified minimum width to this column and splits the remaining space between the rest of the columns.
In the following example, all column widths are 550 px / 4 = 137 px, which is greater than the default MinWidth value (50 px):
<style>
.my-class {
width: 550px;
}
</style>
<DxGrid Data="@Data"
CssClass="my-class">
<Columns>
<DxGridDataColumn FieldName="Date" DisplayFormat="d" />
<DxGridDataColumn FieldName="Forecast" />
<DxGridDataColumn FieldName="CloudCover" />
<DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" />
</Columns>
</DxGrid>
@code {
object Data { get; set; }
protected override void OnInitialized() {
Data = ForecastService.GetForecast().ToList();
}
}
Several Column Widths Are Unspecified
If the Grid contains at least one column whose width is unspecified, the Grid applies specified column widths first. Columns without specified widths occupy the remaining grid width in equal shares (but not less than the MinWidth value).
In the example below, the web browser applies the Date and Forecast column widths first. The remaining 550 px - 275 px - 110 px = 165 px are divided between the Cloud Cover and Temp. (℃) columns equally (165 px / 2 = 82 px).
<style>
.my-class {
width: 550px;
}
</style>
<DxGrid Data="@Data"
CssClass="my-class">
<Columns>
<DxGridDataColumn FieldName="Date" DisplayFormat="D" Width="275"/> @* width = 275 px *@
<DxGridDataColumn FieldName="Forecast" Width="110" /> @* width = 110 px *@
<DxGridDataColumn FieldName="CloudCover" /> @* width = 82 px *@
<DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" /> @* width = 82 px *@
</Columns>
</DxGrid>
@code {
object Data { get; set; }
protected override void OnInitialized() {
Data = ForecastService.GetForecast().ToList();
}
}
Column Widths Are Specified in Different Units
If the Grid contains columns whose widths are specified in absolute units while other column widths are specified in percentages, the Grid applies column widths specified in absolute units first. The remaining column widths are calculated in the specified percentages from the Grid’s total width (but not less than the MinWidth value). If the calculated total column width is less that the Grid’s width, the empty space remains to the right.
In the example below, the web browser calculates the Date and Forecast column widths first (275 px and 110 px, respectively). The remaining column widths are calculated in the specified percentages from the Grid’s total width (550 px*0.15 = 82 px).
<style>
.my-class {
width: 550px;
}
</style>
<DxGrid Data="@Data"
CssClass="my-class">
<Columns>
<DxGridDataColumn FieldName="Date"
DisplayFormat="D"
Width="275"/> @* width = 275 px *@
<DxGridDataColumn FieldName="Forecast"
Width="110" /> @* width = 110 px *@
<DxGridDataColumn FieldName="CloudCover"
Width="15%" /> @* width = 82 px *@
<DxGridDataColumn FieldName="TemperatureC"
Caption="@("Temp. (\x2103)")"
Width="15%" /> @* width = 82 px *@
</Columns>
</DxGrid>
@code {
object Data { get; set; }
protected override void OnInitialized() {
Data = ForecastService.GetForecast().ToList();
}
}
If the calculated total column width exceeds the Grid’s width, column widths specified in percentages are recalculated relative to the Grid’s remaining space in the following way: SpecifiedColumnWidthInPercentages/SumOfAllPercentages * GridRemainingWidthInPixels (but not less than the MinWidth value).
In the following example, the sum of all column widths in percentages is 80%. In this case, column widths are calculated relative to this value. For instance, the width of the Forecast column is 30% / 80% * (550 px - 215 px) = 126 px.
<style>
.my-class {
width: 550px;
}
</style>
<DxGrid Data="@Data"
CssClass="my-class">
<Columns>
<DxGridDataColumn FieldName="Date"
DisplayFormat="D"
Width="215"/> @* width = 215 px *@
<DxGridDataColumn FieldName="Forecast"
Width="30%" /> @* width = 126 px *@
<DxGridDataColumn FieldName="CloudCover"
Width="30%" /> @* width = 126 px *@
<DxGridDataColumn FieldName="TemperatureC"
Caption="@("Temp. (\x2103)")"
Width="20%" /> @* width = 83 px *@
</Columns>
</DxGrid>
@code {
object Data { get; set; }
protected override void OnInitialized() {
Data = ForecastService.GetForecast().ToList();
}
}
If the Grid’s remaining space is empty and you set a column’s MinWidth to 0, columns with widths specified in percentages are collapsed.
The Total Column Width in Pixels Exceeds the Grid’s Width
If the Grid’s total width is specified (the default value is 100% of the container width) and the sum of all column widths in pixels (considering the MinWidth value) is greater than the specified total value, the component displays the horizontal scrollbar. In the following example, the sum of column widths is 750 px, which is greater than the Grid’s total width of 550 px.
<style>
.my-class {
width: 550px;
}
</style>
<DxGrid Data="@Data"
CssClass="my-class">
<Columns>
<DxGridDataColumn FieldName="Date" DisplayFormat="D" Width="250"/> @* width = 250 px *@
<DxGridDataColumn FieldName="Forecast" Width="200" /> @* width = 200 px *@
<DxGridDataColumn FieldName="CloudCover" Width="250"/> @* width = 250 px *@
<DxGridDataColumn FieldName="TemperatureC"
Caption="@("Temp. (\x2103)")" /> @* width = MinWidth = 50 px *@
</Columns>
</DxGrid>
@code {
object Data { get; set; }
protected override void OnInitialized() {
Data = ForecastService.GetForecast().ToList();
}
}
If you clear the Grid’ width attribute value (for example, set it to unset), the component fills the container to display all columns.
<style>
.my-class {
width: unset;
}
</style>
<DxGrid Data="@Data"
CssClass="my-class">
<Columns>
<DxGridDataColumn FieldName="Date" DisplayFormat="D" Width="250"/> @* width = 250 px *@
<DxGridDataColumn FieldName="Forecast" Width="200" /> @* width = 200 px *@
<DxGridDataColumn FieldName="CloudCover" Width="250"/> @* width = 250 px *@
<DxGridDataColumn FieldName="TemperatureC"
Caption="@("Temp. (\x2103)")" /> @* width is based on the container's width *@
</Columns>
</DxGrid>
@code {
object Data { get; set; }
protected override void OnInitialized() {
Data = ForecastService.GetForecast().ToList();
}
}
The Total Column Width in Pixels is Less than the Grid’s Width
If the sum of all specified column widths is less than the Grid’s width, the empty space remains to the right. In the following example, the sum of column widths is 500 px, which is less than the Grid’s total width of 550 px. The remaining 50 px are displayed to the right.
<style>
.my-class {
width: 550px;
}
</style>
<DxGrid Data="@Data"
CssClass="my-class">
<Columns>
<DxGridDataColumn FieldName="Date" DisplayFormat="d" Width="150"/>
<DxGridDataColumn FieldName="Forecast" Width="130" />
<DxGridDataColumn FieldName="CloudCover" Width="140"/>
<DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="80"/>
</Columns>
</DxGrid>
@code {
object Data { get; set; }
protected override void OnInitialized() {
Data = ForecastService.GetForecast().ToList();
}
}
The Total Column Width in Percentages Exceeds 100%
If the sum of all column widths is greater than 100%, the component reduces these values proportionally so that the sum of the percentages equals 100%.
In the following example, the sum of all column widths is 150%. Column widths are then reduced relative to these values. For instance, the width of the Date column is 60% of the 150%, but would be 40% if the sum is 100%.
<DxGrid Data="@Data" >
<Columns>
<DxGridDataColumn Width="60%" FieldName="Date" DisplayFormat="D" />
<DxGridDataColumn Width="50%" FieldName="Forecast" />
<DxGridDataColumn Width="20%" FieldName="CloudCover" />
<DxGridDataColumn Width="20%" FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" />
</Columns>
</DxGrid>
The Total Column Width in Percentages is Less than 100%
If the sum of all column widths in percentages is less than 100%, the empty space remains to the right.
In the following example, the column width sum is 70%and the remaining 30% are displayed to the right.
<DxGrid Data="@Data" >
<Columns>
<DxGridDataColumn Width="40%" FieldName="Date" DisplayFormat="D" />
<DxGridDataColumn Width="10%" FieldName="Forecast" />
<DxGridDataColumn Width="10%" FieldName="CloudCover" />
<DxGridDataColumn Width="10%" FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" />
</Columns>
</DxGrid>
