RadzenGridView ColumnPicker conflicts with columns resizing

Radzen.Blazor Components
1

Greetings,
There seems to be a conflict when using both the columnpicker feature and resizing columns width.
We attached a demo of the issue to illustrate more; When columns are deselected (excluded from shown columns), the grid component tries to apply a width value on its own when resizing the columns (prevents user to set his desired width). On the other hand, if there are enough columns shown which fill the whole width area of the grid (e.g. all columns visible), resizing seems to be working quite well.
we did this test on online demo of Radzen and here is the code:

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage
<RadzenButton Text="Toggle EmployeeID column visibility" Click=@(() => EmployeeIDVisible = !EmployeeIDVisible) class="rz-my-4"/>
<RadzenDataGrid Data="@employees" TItem="Employee" AllowFiltering=true ColumnWidth="300px" AllowColumnPicking="true" AllowColumnResize="true" PickedColumnsChanged="@PickedColumnsChanged">
    <Columns>
        <RadzenDataGridColumn Visible="@EmployeeIDVisible" Property="@nameof(Employee.EmployeeID)" Title="ID" Width="80px" TextAlign="TextAlign.Center" Frozen="true" />
        <RadzenDataGridColumn Title="Photo" Sortable="false" Width="200px" Pickable="false">
            <Template Context="data">
                <RadzenImage Path="@data.Photo" class="rz-gravatar" AlternateText="@(data.FirstName + " " + data.LastName)" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="First Name" />
        <RadzenDataGridColumn Property="@nameof(Employee.LastName)" Title="Last Name" Width="150px"/>
        <RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" />
        <RadzenDataGridColumn Property="@nameof(Employee.TitleOfCourtesy)" Title="Title Of Courtesy" />
        <RadzenDataGridColumn Property="@nameof(Employee.BirthDate)" Title="Birth Date" FormatString="{0:d}" />
        <RadzenDataGridColumn Property="@nameof(Employee.HireDate)" Title="Hire Date" FormatString="{0:d}" />
        <RadzenDataGridColumn Property="@nameof(Employee.Address)" Title="Address" />
        <RadzenDataGridColumn Property="@nameof(Employee.City)" Title="City" />
        <RadzenDataGridColumn Property="@nameof(Employee.Region)" Title="Region" />
        <RadzenDataGridColumn Property="@nameof(Employee.PostalCode)" Title="Postal Code" />
        <RadzenDataGridColumn Property="@nameof(Employee.Country)" Title="Country" />
        <RadzenDataGridColumn Property="@nameof(Employee.HomePhone)" Title="Home Phone" />
        <RadzenDataGridColumn Property="@nameof(Employee.Extension)" Title="Extension" />
        <RadzenDataGridColumn Property="@nameof(Employee.Notes)" Title="Notes" />
    </Columns>
</RadzenDataGrid>

<EventConsole @ref=@console />

@code {
    bool EmployeeIDVisible = false;
    IEnumerable<Employee> employees;
    EventConsole console;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        employees = dbContext.Employees;
    }

    void PickedColumnsChanged(DataGridPickedColumnsChangedEventArgs<Employee> args)
    {
        EmployeeIDVisible = args.Columns.Select(c => c.Property).Contains(nameof(Employee.EmployeeID));
        console.Log($"Picked columns: {string.Join(", ", args.Columns.Select(c => c.Title))}");
    }
}

RadzenDemo

2

You can use the following CSS style to avoid this:

<style type="text/css">
.rz-grid-table {
    width: unset;
}
</style>
1 Like