I AutoFit all columns in the Grid but would like to be able to reset their width to the initial value at a later point.
===
TELERIK EDIT: Here are two workarounds for two possible scenarios:
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
OnClick="@AutoFitColumns">AutoFit Columns</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
OnClick="@ResetColumns">Reset Column Widths</TelerikButton>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Reorderable="true"
Resizable="true">
<GridColumns>
<GridColumn Field="@nameof(Product.Id)" />
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Category)" />
<GridColumn Field="@nameof(Product.Stock)" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Product>? GridRef { get; set; }
private List<Product> GridData { get; set; } = new();
private async Task AutoFitColumns()
{
if (GridRef == null)
{
return;
}
await GridRef.AutoFitAllColumnsAsync();
}
private async Task ResetColumns()
{
if (GridRef == null)
{
return;
}
var gridState = GridRef.GetState();
foreach (var columnState in gridState.ColumnStates)
{
columnState.Width = "auto;";
}
gridState.TableWidth = $"99.9{DateTime.Now.Millisecond}%"; // Set something close to 100% instead of removing the value
await GridRef.SetStateAsync(gridState);
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Product {i}",
Category = $"Category {i % 4 + 1}",
Stock = Random.Shared.Next(0, 100),
Discontinued = i % 3 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Category { get; set; } = string.Empty;
public int Stock { get; set; }
public bool Discontinued { get; set; }
}
}
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Reorderable="true"
Resizable="true"
Width="@GridWidth"
ShowColumnMenu="true"
OnStateChanged="@( (GridStateEventArgs<Product> args) => OnGridStateChanged(args) )">
<GridColumns>
<GridCheckboxColumn SelectAll="true" />
<GridColumn Field="@nameof(Product.Id)" />
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Category)" />
<GridColumn Field="@nameof(Product.Stock)" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Product>? GridRef { get; set; }
private List<Product> GridData { get; set; } = new();
private string GridWidth => $"{GridIntWidth}px";
private int GridIntWidth = 1000; // A pixel Grid width is required for this scenario
private int GridMaxTableIntWidth => GridIntWidth - 17; // Assuming no horizontal scrolling
private async Task OnGridStateChanged(GridStateEventArgs<Product> args)
{
if (args.PropertyName == "ColumnStates" && Double.Parse(args.GridState.TableWidth.Replace("px", "")) < GridMaxTableIntWidth)
{
args.GridState.TableWidth = $"99.9{DateTime.Now.Millisecond}%"; // Set something close to 100% instead of removing the value
int lastVisibleColumnIndex = GetLastVisibleIndex(args.GridState.ColumnStates);
args.GridState.ColumnStates.First(x => x.Index == lastVisibleColumnIndex).Width = "auto";
await GridRef!.SetStateAsync(args.GridState);
}
}
private int GetLastVisibleIndex(ICollection<GridColumnState> columnStates)
{
int index = 0;
var visibleColumnStates = columnStates.Where(x => !x.Visible.HasValue || x.Visible.Value);
foreach (var columnState in visibleColumnStates)
{
index = Math.Max(index, columnState.Index);
}
return index;
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Product {i}",
Category = $"Category {i % 4 + 1}",
Stock = Random.Shared.Next(0, 100),
Discontinued = i % 3 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Category { get; set; } = string.Empty;
public int Stock { get; set; }
public bool Discontinued { get; set; }
}
}