To optimize performance, I built a custom component that allows the user to choose which aggregates should be calculated. This component ensures that <GridAggregate> tags are inserted into <GridAggregates> via a foreach loop.
This works without any issues, at least when the selection is made for the first time.
However, if a selection is made in which the column of a new aggregate appears before an already selected aggregate, errors occur in the grid. AggregateResults now contains duplicates of an existing aggregate, and the new aggregates are missing.
Test project available in ticket 1718830.
When the Grid is grouped and aggregate functions are enabled, paging performance degrades significantly because grouping and aggregate calculations are executed on every page change. This results in noticeable delays and UI stutter, especially in WebAssembly applications and larger datasets.
This enhancement optimizes page navigation for grouped Grid scenarios with aggregates by avoiding repeated processing when the underlying data has not changed, resulting in substantially faster paging performance while preserving existing functionality and first-load behavior.
I bind the TelerikEditor Value to a property that is reloaded with different unrelated content. The editor keeps the Undo/Redo stack so for the "second" content I can Undo back to the "first" content. I'd like to be able to clear the Undo stack.
In the FileManager in a serverc app, click the New Folder button. Try to enter folder name - depending on the server-client latency, characters may be erased as you type them. The only solution in these cases is to type slower or use a custom tool to create new folders.
The problematic behavior can also be observed when attempting to rename a file or folder through the Rename command in the built-in context menu.
The Gantt Timeline header no longer scrolls horizontally together with the content below it.
The issue occurs in version 15.0.0.
A possible workaround is to enable scroll syncing with JavaScript:
https://blazorrepl.telerik.com/GqYiHFvd10Uo0MgN20
@implements IAsyncDisposable
@inject IJSRuntime JS
<TelerikGantt Data="@GanttData"
@bind-View="@CurrentView"
Class="scrollable-gantt-1"
IdField="@nameof(FlatModel.Id)"
ParentIdField="@nameof(FlatModel.ParentId)"
Width="700px"
Height="500px">
<GanttViews>
<GanttDayView></GanttDayView>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
<GanttYearView></GanttYearView>
</GanttViews>
<GanttColumns>
<GanttColumn Field="@nameof(FlatModel.Id)"
Visible="false">
</GanttColumn>
<GanttColumn Field="@nameof(FlatModel.Title)"
Expandable="true"
Width="160px"
Title="Task Title">
</GanttColumn>
<GanttColumn Field="@nameof(FlatModel.PercentComplete)"
Title="Completed"
Width="60px">
</GanttColumn>
<GanttColumn Field="@nameof(FlatModel.Start)"
Width="100px"
TextAlign="@ColumnTextAlign.Right">
</GanttColumn>
<GanttColumn Field="@nameof(FlatModel.End)"
DisplayFormat="End: {0:d}"
Width="100px">
</GanttColumn>
</GanttColumns>
</TelerikGantt>
<script suppress-error="BL9992">
function initGanttScrollSync(ganttSelector) {
const ganttTimelineContent = document.querySelector(ganttSelector + " .k-gantt-timeline .k-grid-content");
if (ganttTimelineContent) {
ganttTimelineContent.addEventListener("scroll", onGanttTimelineScroll);
}
}
function disposeGanttScrollSync(ganttSelector) {
const ganttTimelineContent = document.querySelector(ganttSelector + " .k-gantt-timeline .k-grid-content");
if (ganttTimelineContent) {
ganttTimelineContent.removeEventListener("scroll", onGanttTimelineScroll);
}
}
function onGanttTimelineScroll(e) {
const ganttTimelineHeader = e.target.closest(".k-gantt-timeline").querySelector(".k-grid-header-wrap");
if (ganttTimelineHeader) {
ganttTimelineHeader.scrollLeft = e.target.scrollLeft;
}
}
</script>
@code {
private List<FlatModel> GanttData { get; set; } = new List<FlatModel>();
private List<FlatModel> Data { get; set; } = new List<FlatModel>();
private GanttView CurrentView { get; set; } = GanttView.Week;
private int LastId { get; set; } = 1;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("initGanttScrollSync", ".scrollable-gantt-1");
}
await base.OnAfterRenderAsync(firstRender);
}
public async ValueTask DisposeAsync()
{
await JS.InvokeVoidAsync("disposeGanttScrollSync", ".scrollable-gantt-1");
}
protected override void OnInitialized()
{
GanttData = new List<FlatModel>();
var random = new Random();
for (int i = 1; i <= 3; i++)
{
var newItem = new FlatModel()
{
Id = LastId,
Title = $"Employee {i}",
Start = new DateTime(2020, 12, 10 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = Math.Round(random.NextDouble(), 2),
HasChildren = true
};
GanttData.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 1; j <= 2; j++)
{
GanttData.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = $"Employee {i} : {j}",
Start = new DateTime(2020, 12, 20 + j),
End = new DateTime(2020, 12, 21 + i + j),
PercentComplete = Math.Round(random.NextDouble(), 2)
});
LastId++;
}
}
base.OnInitialized();
}
public class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; } = string.Empty;
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool HasChildren { get; set; }
}
}
Connections to contextapi.telerik.com fail when the client computer is behind a proxy. The observed error is:
Using ContextApi URL: https://contextapi.telerik.com:443===
ADMIN EDIT
===
For the time being, a possible option is to use the DropDownList component that exposes such events. Customize it so it can look and behave similarly to the DropDownButton.
Example implementation: https://blazorrepl.telerik.com/mekbkTPE21kwyMBU05.
Why does the TelerikCalendar not support the DateOnly struct? Can this functionality be added?
Many of our Date operations rely on the DateOnly struct.
(bug report only)
Run this example: https://blazorrepl.telerik.com/GqaiPtbH54zmCKSH29
There are two editable columns (Price).
1. Click on the first Price column cell in the first row.
2. Press Tab key. The last editable cell on the first row is focused and is brought into view.
3. Press Tab again. The first editable cell on the second row is focused and brought into view.
4. Press Tab again. The last editable cell on the second row is focused, but it is not brought into view.
(optional)
Navigation across editable cells works inconsistently. On every other row, the last editable cell is not brought into view.
Navigation should work consistently on every row.
Please implement
with inheritance from a well-defined C# interface because the current Blazor implementation for DataSourceRequest and DataSourceResult do not do so. However, if they inherit from interfaces, then that makes more clear and explicit what contract must be used to maintain interoperability with the Telerik controls for Blazor while also enabling alternate customized concrete implementations that developers (such as myself) can extend while also adhering to the required Telerik contract specified in the interface.
Furthermore, with specification by interface, then our customized variants can also be instantiated by dependency injection wherever we want in our code libraries. Keep in mind that C# interfaces support multiple inheritance while C# classes do not. So please provide interfaces for the most critical and important classes, especially DataSourceRequest and DataSourceResult in your Telerik.DataSource library.
(bug report only)
The clear button in the ComboBox (MultiColumnComboBox, etc.) currently renders as a span element and has the following attributes:
<span class="k-clear-value" role="button" tabindex="-1" title="Clear"> ... </span>
Excluding a button from the Tab key sequence does not hide it from a screen reader user. A screen reader user navigating by virtual cursor (using arrow keys or "next button" shortcuts) can and will still find this span element. When they arrive at it, they will hear "Clear, button." Naturally, they will press Enter or Space to activate it.
Current behavior
(optional)
Provide additional information if the steps for reproducing the faulty behavior are not sufficient to describe the issue.
Make the span WCAG 4.1.2 compliant: https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/
<span class="k-clear-value" role="button" tabindex="-1" aria-label="Clear selection" title="Clear"> ... </span>
We can also consider completely hiding the span from screen readers, by rendering aria-hidden="true" on the span element, for example:
<span class="k-clear-value" role="button" tabindex="-1" aria-hidden="true"> </span>
The Kendo Angular ComboBox implements a similar approach. This will be in accordance with WCAG 4.1.2, because aria-hidden="true" removes the element from the accessibility tree entirely, it is no longer parsed as an active UI component by screen readers.
(optional)
Provide the TicketID, where the bug report initiated.