DevExpress v24.2 Update — Your Feedback Matters
Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.
Take the survey
Not interested
DxGridColumn.Width Property
Namespace : DevExpress.Blazor
Assembly :
DevExpress.Blazor.v24.2.dll
NuGet Package :
DevExpress.Blazor
# Declaration
C#
[DefaultValue(null) ]
[Parameter ]
public string Width { get ; set ; }
# Property Value
Type
Default
Description
String
null
The column’s width.
You can specify the Width
property in any relative or absolute units that your browser supports.
@inject WeatherForecastService ForecastService
<DxGrid Data ="@ Data" >
<Columns >
<DxGridDataColumn FieldName ="Date" DisplayFormat ="D" />
<DxGridDataColumn FieldName ="TemperatureC" Caption ="@( "Temp. (\x2103) " ) " Width ="120px" />
<DxGridDataColumn FieldName ="TemperatureF" Caption ="@( "Temp. (\x2109) " ) " Width ="120px" />
<DxGridDataColumn FieldName ="Forecast" />
<DxGridDataColumn FieldName ="CloudCover" />
</Columns >
</DxGrid >
@ code {
object Data { get ; set ; }
protected override void OnInitialized ( ) {
Data = ForecastService.GetForecast();
}
}
using System ;
public class WeatherForecast {
public DateTime Date { get ; set ; }
public int TemperatureC { get ; set ; }
public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32 ), 2 );
public string Forecast { get ; set ; }
public string CloudCover { get ; set ; }
public bool Precipitation { get ; set ; }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
public class WeatherForecastService {
private List<WeatherForecast> Forecast { get ; set ; }
private static string [] CloudCover = new [] {
"Sunny" , "Partly cloudy" , "Cloudy" , "Storm"
};
Tuple<int , string >[] ConditionsForForecast = new Tuple<int , string >[] {
Tuple.Create( 22 , "Hot" ),
Tuple.Create( 13 , "Warm" ),
Tuple.Create( 0 , "Cold" ),
Tuple.Create( -10 , "Freezing" )
};
public WeatherForecastService ( ) {
Forecast = CreateForecast();
}
private List<WeatherForecast> CreateForecast ( ) {
var rng = new Random();
DateTime startDate = DateTime.Now;
return Enumerable.Range(1 , 15 ).Select(index => {
var temperatureC = rng.Next(-10 , 30 );
return new WeatherForecast {
Date = startDate.AddDays(index),
TemperatureC = temperatureC,
CloudCover = CloudCover[rng.Next(0 , 4 )],
Precipitation = Convert.ToBoolean(rng.Next(0 , 2 )),
Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
};
}).ToList();
}
public IEnumerable<WeatherForecast> GetForecast ( ) {
return Forecast.ToArray();
}
}
builder.Services.AddSingleton<WeatherForecastService>();
If you do not specify a column’s Width
property explicitly, its value is automatically calculated based on the Grid’s total width, other column widths, borders, and cell spacing. For more information on how this algorithm works in different scenarios, refer to the following topic: Layout Specifics in Blazor Grid .
If there is not enough space to display all Grid columns, columns with unspecified widths can be collapsed. To prevent a column from collapsing, set its MinWidth property to a non-zero value.
Run Demo: Grid - Data Binding
See Also