Hello Radzen team,
I recently noticed that when using a horizontal ToC and a Datagrid containing a frozen column, the ToC gets in the middle of those columns.
This is the code I use from one of the examples in your page:
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@inherits DbContextPage
<RadzenLayout Style="grid-template-areas: 'rz-header rz-header' 'rz-body rz-body'">
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="0" class="rz-p-4">
<RadzenLabel Text="Header" />
</RadzenStack>
</RadzenHeader>
<RadzenBody class="horizontal-and-vertical-toc" Style="position: relative;">
<RadzenToc Orientation="Orientation.Horizontal" Selector=".horizontal-and-vertical-toc" Style="position: sticky; top: 0; z-index: 1;" class="rz-display-none rz-display-md-flex">
<RadzenTocItem Text="Section 1" Selector="#orientation-section1"></RadzenTocItem>
<RadzenTocItem Text="Section 2" Selector="#orientation-section2"></RadzenTocItem>
<RadzenTocItem Text="Section 3" Selector="#orientation-section3"></RadzenTocItem>
<RadzenTocItem Text="Section 4" Selector="#orientation-section4"></RadzenTocItem>
<RadzenTocItem Text="Section 5" Selector="#orientation-section5"></RadzenTocItem>
<RadzenTocItem Text="HTML Heading" Selector="#orientation-html-heading"></RadzenTocItem>
</RadzenToc>
<RadzenRow class="rz-w-75 rz-w-sm-100">
<RadzenColumn Size="8" SizeSM="6" SizeMD="8" SizeLG="9" Order="2" OrderSM="1">
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H5">
Title
</RadzenText>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H5" Anchor="toc#orientation-section1">
Section 1
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-8">
<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" AllowPaging="true" AllowSorting="true" Data="@employees"
ColumnWidth="140px" LogicalFilterOperator="LogicalFilterOperator.Or" Style="height:300px">
<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.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" Frozen="true" FrozenPosition="FrozenColumnPosition.Right" />
<RadzenDataGridColumn Property="@nameof(Employee.Notes)" Title="Notes" Frozen="true" FrozenPosition="FrozenColumnPosition.Right" />
</Columns>
</RadzenDataGrid>
</RadzenText>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H5" Anchor="toc#orientation-section2">
Section 2
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-8">
Section 2 content
</RadzenText>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H5" Anchor="toc#orientation-section3">
Section 3
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-8">
Section 3 content
</RadzenText>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H5" Anchor="toc#orientation-section4">
Section 4
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-8">
Section 4 content
</RadzenText>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H5" Anchor="toc#orientation-section5">
Section 5
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-8">
Section 5 content
</RadzenText>
<h5 id="orientation-html-heading">HTML heading</h5>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-8">
HTML heading content
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-py-12">
Copyright © 2025 Radzen Ltd. All rights reserved.
</RadzenText>
</RadzenColumn>
<RadzenColumn Size="8" SizeSM="6" SizeMD="4" SizeLG="3" Order="1" OrderSM="2">
<RadzenToc Orientation="Orientation.Vertical" Selector=".horizontal-and-vertical-toc" Style="position: sticky; top: 5rem; right: 0;">
<RadzenTocItem Text="Section 1" Selector="#orientation-section1"></RadzenTocItem>
<RadzenTocItem Text="Section 2" Selector="#orientation-section2"></RadzenTocItem>
<RadzenTocItem Text="Section 3" Selector="#orientation-section3"></RadzenTocItem>
<RadzenTocItem Text="Section 4" Selector="#orientation-section4"></RadzenTocItem>
<RadzenTocItem Text="Section 5" Selector="#orientation-section5"></RadzenTocItem>
<RadzenTocItem Text="HTML Heading" Selector="#orientation-html-heading"></RadzenTocItem>
</RadzenToc>
</RadzenColumn>
</RadzenRow>
</RadzenBody>
</RadzenLayout>
@code {
IEnumerable<Employee> employees;
bool frozen;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
employees = dbContext.Employees;
}
}
