<TelerikGrid Data="@GridData"
             Pageable="true"
             @bind-PageSize="@GridPageSize"
             Navigable="true">
    <GridSettings>
        <GridPagerSettings InputType="@GridPagerInputType"
                           PageSizes="@( new List<int?> { 2, 5 } )" />
    </GridSettings>

    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<SampleModel> GridData { get; set; } = new();

    private int GridPageSize { get; set; } = 5;

    //private PagerInputType GridPagerInputType { get; set; } = PagerInputType.Input;
    private PagerInputType GridPagerInputType => GridPageSize >= GridData.Count ? PagerInputType.Buttons : PagerInputType.Input;

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 3; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"Name {i}"
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }
}

<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; }
    }
}

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid @ref="@GridRef"
             OnRead="@OnGridRead"
             TItem="@Product"
             Pageable="true">
    <GridAggregates>
        <GridAggregate Field="@nameof(Product.Name)" Aggregate="@GridAggregateType.Count" FieldType="@(typeof(System.String))" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name">
            <FooterTemplate>
                @context.Count
            </FooterTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Product.Price)" />
        <GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
        <GridColumn Field="@nameof(Product.Active)" />
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<Product> GridRef { get; set; }
    List<Product> GridData { get; set; }

    bool ShouldBindGrid { get; set; }

    async Task OnGridRead(GridReadEventArgs args)
    {
        if (!ShouldBindGrid)
        {
            return;
        }

        await Task.Delay(200); // simulate network delay

        DataSourceResult result = GridData.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // workaround for initial Grid aggregates
            ShouldBindGrid = true;
            GridRef.Rebind();
            StateHasChanged();
        }
    }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();
        var rnd = new Random();

        for (int i = 1; i <= 50; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = "Product " + i.ToString(),
                Price = (decimal)rnd.Next(1, 100),
                ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                Active = i % 3 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool Active { get; set; }
    }
}

<GridColumnMenuSettings
	FilterMode="@ColumnMenuFilterMode.None"
	Lockable="true"
	ShowColumnChooser="true"
	Groupable="false"
	Sortable="false"
	Reorderable="false">
</GridColumnMenuSettings>