Redimension Column width during runtime about grid.blazor

[gustavnavar]

You can do it using the Width property of the selected column.

The accepted values of the Width property are strings with the units (e.g. "100px", "20em", etc.)

The following page allows you to change the size of the first column of the grid ("OrderID").

@page "/"
@using GridBlazorServerSide.ColumnCollections
@using GridBlazorServerSide.Models
@using GridBlazorServerSide.Resources
@using GridBlazorServerSide.Services
@using Microsoft.Extensions.Primitives
@using System.Globalization
@using System.Threading.Tasks
@inject IOrderService orderService

<h1>Grid Sample</h1>

<p>
    This page contains a basic grid
</p>

<p>
    This component demonstrates a GridBlazor server-side grid. For more information, please see: <a href="https://github.com/gustavnavar/Grid.Blazor">https://github.com/gustavnavar/Grid.Blazor</a>
</p>

@if (_task.IsCompleted)
{
    <div class="row" style="margin-bottom:10px;">
        <label class="control-label col-md-1"><b>Col widtj</b></label>
        <div class="col-md-2">
            <input class="form-control" @bind="_colWidth" @onkeyup="InputColWidthKeyup" @onclick:stopPropagation />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <GridComponent T="Order" Grid="@_grid"></GridComponent>
        </div>
    </div>
}
else
{
    <p><em>Loading...</em></p>
}

@code
{
    private CGrid<Order> _grid;
    private Task _task;
    private string _colWidth;

    protected override async Task OnParametersSetAsync()
    {
        var locale = CultureInfo.CurrentCulture;
        SharedResource.Culture = locale;

        var columnCollections = new ColumnCollections();
        var query = new QueryDictionary<StringValues>();
        var client = new GridClient<Order>(q => orderService.GetOrdersGridRows(ColumnCollections.OrderColumns, q),
            query, false, "ordersGrid", ColumnCollections.OrderColumns, locale)
            .Sortable()
            .Filterable()
            .SetStriped(true)
            .WithMultipleFilters()
            .WithGridItemsCount();

        _grid = client.Grid;
        // Set new items to grid
        _task = client.UpdateGrid();
        await _task;
        var column = ((ICGrid)_grid).Columns.SingleOrDefault(r => r.Name == "OrderID");
        _colWidth = column.Width;
    }

    public void InputColWidthKeyup(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            var column = ((ICGrid)_grid).Columns.SingleOrDefault(r => r.Name == "OrderID");
            column.Width = _colWidth;
        }
    }
}