DataGrid Frozen Column with transparent background

Hello Radzen Team,

I just noticed when freezing a column to the right in the datagrid component that somehow it adds a transparency level especially when selection mode is enabled, and you hover the rows. See below:
Animation

the example is from your demo I just changed the location of one of the columns to hightlight this issue.

Look at the columns City and Extension (this is the column being frozen) and you will notice some overlapping from other columns.

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

@inherits DbContextPage

<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" AllowPaging="true" AllowSorting="true" Data="@employees" 
    ColumnWidth="140px" LogicalFilterOperator="LogicalFilterOperator.Or" Style="height:300px"
    SelectionMode="DataGridSelectionMode.Single" @bind-Value=@selectedEmployees>
    <Columns>
        <RadzenDataGridColumn Property="@nameof(Employee.EmployeeID)" Filterable="false" Title="ID" Frozen="true" Width="5rem" TextAlign="TextAlign.Center" />
        <RadzenDataGridColumn Title="Photo" Sortable="false" Filterable="false" Frozen="@frozen" Width="80px" TextAlign="TextAlign.Center">
            <HeaderTemplate>
                <RadzenCheckBox @bind-Value="frozen" title="Pin/Unpin this column" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Pin/Unpin Photo column" }})" />
            </HeaderTemplate>
            <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" Frozen="true">
            <FooterTemplate>
                Total employees: <b>@employees.Count()</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(Employee.LastName)" Title="Last Name">
                <FooterTemplate>
                Footer
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" Width="200px" />
        <RadzenDataGridColumn Property="@nameof(Employee.BirthDate)" Title="Birth Date" FormatString="{0:d}" Frozen="true" FrozenPosition="FrozenColumnPosition.Left"/>
        <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.Extension)" Title="Extension" Frozen="true" FrozenPosition="FrozenColumnPosition.Right" />
        <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.Notes)" Title="Notes" Frozen="true" FrozenPosition="FrozenColumnPosition.Right" />
    </Columns>
</RadzenDataGrid>

@code {
    IEnumerable<Employee> employees;

        IList<Employee> selectedEmployees;
    bool frozen;

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

        employees = dbContext.Employees;
    }
}

Thanks in advance!

@yordanov can you take a look at this?

1 Like

Hi @cscastilloliva90,

Thanks for reporting. It's a bug that's just been fixed. The fix will be available with the next update.

Perfect! just updated my apps and they work perfectly fine now!

Thank you very much @yordanov!