Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redimension Column width during runtime #49

Closed
mythrz opened this issue Dec 2, 2019 · 1 comment
Closed

Redimension Column width during runtime #49

mythrz opened this issue Dec 2, 2019 · 1 comment

Comments

@mythrz
Copy link

mythrz commented Dec 2, 2019

**Feature Request, Column width: **
Allow the user to re-dimension the width of each of the columns individually.

@gustavnavar
Copy link
Owner

gustavnavar commented Dec 11, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants