GridColumn MinWidth not working
Version 25.1.35
I have a SfGrid where every column has a "Width" value set in pixels, except for one "Comment" column. the comment column adjusts to fit the grid width based on the screen size which is as expected.
However, I want the comment column to have a minimum width so that it doesn't disappear on smaller screens. I set the MinWidth property to "200px" and also tried "200" but this has no effect - the column still shrinks to zero.
I would expect the column to shrink and grow based on the size of the grid, but since the MinWidth is set to 200 I would expect that the column is always at least 200px wide, but that is not happening. Why? It feels like a bug.
Large screen:
Small screen (Comment should still be at least 200px wide but instead it is :
Code:
<SfGrid @ref=grid DataSource="@plan.Items.Where(x=>x.Alive)">
<GridEvents TValue="ProdPlanItem"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(ProdPlanItem.Id) IsPrimaryKey="true" Visible="false" />
<GridColumn Field=@nameof(ProdPlanItem.StartDate) Width="140px" HeaderText="Start">
<Template>
@{
var item = context as ProdPlanItem;
<SfTimePicker TValue="DateTime" Format="HH:mm:ss" @bind-Value="item.StartDate">
<TimePickerEvents TValue="DateTime" ValueChange="(x)=>DB.AutoSaveDate(x,plan)"></TimePickerEvents>
</SfTimePicker>
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(ProdPlanItem.EndDate) Width="140px" HeaderText="End">
<Template>
@{
var item = context as ProdPlanItem;
if (item.EndDate == DateTime.MinValue) {
<span class="e-icons e-clock" />
}
else {
<SfTimePicker TValue="DateTime" Format="HH:mm:ss" @bind-Value="item.EndDate" Min="item.StartDate">
<TimePickerEvents TValue="DateTime" ValueChange="(x)=>DB.AutoSaveDate(x,plan)"></TimePickerEvents>
</SfTimePicker>
}
}
</Template>
</GridColumn>
<GridColumn Field="mins" Width="50px" HeaderText="Mins">
<Template>
@{
var item = context as ProdPlanItem;
if (item.StartDate != DateTime.MinValue && item.EndDate != DateTime.MinValue) {
<div>@((item.EndDate - item.StartDate).TotalMinutes.ToString("0"))</div>
}
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(ProdPlanItem.MetalLink) Width="200px" HeaderText="Material">
<Template>
@{
var item = context as ProdPlanItem;
@if (MetalList != null) {
<SfDropDownList TItem="Metal" TValue="int" DataSource="MetalList" @bind-Value=item.MetalLink Enabled="item.ActivityLink==0">
<DropDownListFieldSettings Text="MetalGrade" Value="Id"></DropDownListFieldSettings>
<DropDownListEvents TValue="int" TItem="Metal" ValueChange="(x)=>DB.AutoSaveList<Metal>(x, item)" />
</SfDropDownList>
}
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(ProdPlanItem.ActivityLink) Width="200px" HeaderText="Activity">
<Template>
@{
var item = context as ProdPlanItem;
@if (ActivityList != null) {
<SfDropDownList TItem="ActivityUM" TValue="int" DataSource="ActivityList" @bind-Value=item.ActivityLink Enabled="item.MetalLink==0">
<DropDownListFieldSettings Text="Title" Value="Id"></DropDownListFieldSettings>
<DropDownListEvents TValue="int" TItem="ActivityUM" ValueChange="(x)=>DB.AutoSaveList<ActivityUM>(x, item)" />
</SfDropDownList>
}
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(ProdPlanItem.WeightLbs) Width="100px" HeaderText="LBS">
<Template>
@{
var item = context as ProdPlanItem;
<SfNumericTextBox TValue="double" @bind-Value=item.WeightLbs ShowSpinButton=false Format="0.#">
<NumericTextBoxEvents TValue="double" ValueChange="(x)=>SaveLbs(x, item)"></NumericTextBoxEvents>
</SfNumericTextBox>
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(ProdPlanItem.WeightNt) Width="100px" HeaderText="NT">
<Template>
@{
var item = context as ProdPlanItem;
<SfNumericTextBox TValue="double" @bind-Value=item.WeightNt ShowSpinButton=false Format="0.##">
<NumericTextBoxEvents TValue="double" ValueChange="(x)=>SaveNT(x, item)"></NumericTextBoxEvents>
</SfNumericTextBox>
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(ProdPlanItem.Comment) MinWidth="200px">
<Template>
@{
var item = context as ProdPlanItem;
<SfTextBox @bind-Value=item.Comment ValueChange="(x)=>DB.AutoSaveText(x,item)"></SfTextBox>
}
</Template>
</GridColumn>
<GridColumn Field="del" Width="75px" HeaderText="">
<Template>
@{
var item = context as ProdPlanItem;
<SfButton IconCss="e-icons e-trash" CssClass="bg-danger" OnClick="()=>DeleteItem(item)"></SfButton>
}
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
