Completed
Last Updated: 25 Apr 2025 09:44 by ADMIN
Bhalchandra
Created on: 24 Apr 2025 16:04
Category: UI for Blazor
Type: Bug Report
0
Telerik UI for Blazor Grid Frozen/Locked column headers overlap while horizontal scrolling

We are using Telerik UI for Blazor (V6.2.0) grid. The first 3 columns (Delivery No, Spot Check, Spotcheck Status) of the grid are frozen/locked. While horizontal scrolling the header text gets overlapped. We have used custom CSS to change the header color.

<TelerikGrid @ref="@GridRef" Data="@dashboardData"
             Reorderable="true"
             SortMode="@SortMode.Single"
             Pageable="true"
             FilterMode="GridFilterMode.FilterRow"
             PageSize="10"
             EnableLoaderContainer="true"
             Sortable="true" Context="inboundContext" OnRowRender="@OnRowRenderHandler" Width="1800px" Height="500px">

    <GridColumns>
        @foreach (var header in tableHeader)
        {
            @if (@header.id == "SpotCheck")
            {
                <GridColumn Field="@(nameof(@header.id))" Width="150px" Title="@header.headerName" Visible="@header.isVisible" Locked="true" Reorderable="false" Filterable="false">
                    <Template>
                        @{
                            var item = (Delivery)context;
                            var isVisible = (item.DeliveryType.Equals("IN") && !string.IsNullOrEmpty(item.EUDRRefAndVerificationId));
                        }
                        <div class="spot-check-btn">
                            <TelerikButton Class="custom-btn custom-btn-secondary" OnClick="()=>reDirectTo(item.Id)" Visible="isVisible">Spot Check</TelerikButton>
                        </div>
                    </Template>

                </GridColumn>
            }
            else if (@header.id == "status")
            {
                <GridColumn Field="@(nameof(@header.id))" Title="@header.headerName" Visible="@header.isVisible" Width="150px">
                    <Template>
                        @{
                            var item = (Delivery)context;
                            <span class="status-data @item.Status.ToLower()">
                                <span class="dot"></span>@item.Status
                            </span>
                        }
                    </Template>

                </GridColumn>
            }
            else if (@header.id == "SpotcheckStatus")
            {
                <GridColumn Field="@header.id" Title="@header.headerName" Width="150px"
                            OnCellRender="@((e) => OnCellRenderHandlerSpotcheckStatus(e))"
                            Visible="@header.isVisible" Locked="true" Reorderable="false">
                </GridColumn>
            }
            else
            {
                <GridColumn Field="@header.id" Title="@header.headerName" Width="150px"
                            OnCellRender="@((x) => OnCellRenderHandler(x, @header.id))"
                            Visible="@header.isVisible" Locked="@header.Locked">
                </GridColumn>

            }
        }
    </GridColumns>
    <NoDataTemplate>
        <p><strong style="color: var(--kendo-color-primary);">No Data Available.</strong></p>
    </NoDataTemplate>
</TelerikGrid>
Attached Files:
1 comment
ADMIN
Dimo
Posted on: 25 Apr 2025 09:44

Hi Bhalchandra,

The described problem is already fixed and should not occur with versions 6.0.0 and above. If you are using a custom theme, make sure it is up-to-date and compatible with the NuGet package version.

Here is an example that works with both 6.2.0 and 8.1.1:

https://blazorrepl.telerik.com/wfYywzat39WTUO7q51

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.