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>