The FileManager TreeView does not expand automatically in some scenarios, which can cause the TreeView and ListView UI to be inconsistent:
Here is a test page and steps to reproduce.
<p>/folder-16/folder-17</p>
<TelerikTextBox @bind-Value="@DirectoryPath" Width="max-content" OnChange="@(() => FileManagerRef!.Rebind())" />
<TelerikFileManager @ref="@FileManagerRef"
Data="@FileManagerData"
@bind-Path="@DirectoryPath"
View="@FileManagerViewType.ListView"
EnableLoaderContainer="false"
OnDownload="@OnDownloadHandler"
NameField="@(nameof(FlatFileEntry.Name))"
SizeField="@(nameof(FlatFileEntry.Size))"
PathField="@(nameof(FlatFileEntry.Path))"
ExtensionField="@(nameof(FlatFileEntry.Extension))"
IsDirectoryField="@(nameof(FlatFileEntry.IsDirectory))"
HasDirectoriesField="@(nameof(FlatFileEntry.HasDirectories))"
IdField="@(nameof(FlatFileEntry.Id))"
ParentIdField="@(nameof(FlatFileEntry.ParentId))"
DateCreatedField="@(nameof(FlatFileEntry.DateCreated))"
DateCreatedUtcField="@(nameof(FlatFileEntry.DateCreatedUtc))"
DateModifiedField="@(nameof(FlatFileEntry.DateModified))"
DateModifiedUtcField="@(nameof(FlatFileEntry.DateModifiedUtc))"
Class="my-filemanager">
</TelerikFileManager>
@code {
private TelerikFileManager<FlatFileEntry>? FileManagerRef { get; set; }
private List<FlatFileEntry>? FileManagerData { get; set; }
public string? DirectoryPath { get; set; } = string.Empty;
private readonly string RootPath = string.Empty;
public async Task<bool> OnDownloadHandler(FileManagerDownloadEventArgs args)
{
await Task.Delay(1);
return true;
}
private int FolderLevelCount { get; set; } = 5;
private int FilesInFolderCount { get; set; } = 5;
private int FoldersInFolderCount { get; set; } = 2;
private int FolderNameCounter { get; set; }
private readonly List<string> FileExtensions = new() {
".txt", ".pdf", ".docx", ".xlsx", ".png", ".jpg", ".gif", ".zip", ".css", ".html", ".mp3", ".mpg"
};
protected override async Task OnInitializedAsync()
{
await Task.CompletedTask;
DirectoryPath = RootPath;
FileManagerData = LoadFlatDataAsync();
await base.OnInitializedAsync();
}
private List<FlatFileEntry> LoadFlatDataAsync()
{
List<FlatFileEntry> data = new List<FlatFileEntry>();
string rootDataPath = string.IsNullOrEmpty(RootPath) ? "/" : RootPath;
PopulateChildren(data, null, rootDataPath, 1);
return data;
}
private void PopulateChildren(List<FlatFileEntry> data, string? parentId, string parentPath, int level)
{
var rnd = Random.Shared;
for (int i = 1; i <= FilesInFolderCount; i++)
{
string itemId = Guid.NewGuid().ToString();
string itemExtension = FileExtensions[rnd.Next(0, FileExtensions.Count)];
string itemName = $"{itemExtension.Substring(1)}-file-{(FolderNameCounter != default ? string.Concat(FolderNameCounter, "-") : string.Empty)}{i}";
string itemPath = Path.Combine(parentPath, string.Concat(itemName, itemExtension));
data.Add(new FlatFileEntry()
{
Id = itemId,
ParentId = parentId,
Name = itemName,
IsDirectory = false,
HasDirectories = false,
DateCreated = DateTime.Now,
DateCreatedUtc = DateTime.Now.ToUniversalTime(),
DateModified = DateTime.Now,
DateModifiedUtc = DateTime.Now.ToUniversalTime(),
Path = itemPath,
Extension = itemExtension,
Size = rnd.Next(1_000, 3_000_000)
});
}
if (level < FolderLevelCount)
{
for (int i = 1; i <= FoldersInFolderCount; i++)
{
var itemId = Guid.NewGuid().ToString();
var itemName = $"folder-{++FolderNameCounter}";
var itemPath = Path.Combine(parentPath, itemName);
data.Add(new FlatFileEntry()
{
Id = itemId,
ParentId = parentId,
Name = itemName,
IsDirectory = true,
HasDirectories = level < FolderLevelCount - 1,
DateCreated = DateTime.Now,
DateCreatedUtc = DateTime.Now.ToUniversalTime(),
DateModified = DateTime.Now,
DateModifiedUtc = DateTime.Now.ToUniversalTime(),
Path = itemPath,
Size = rnd.Next(100_000, 10_000_000)
});
PopulateChildren(data, itemId, itemPath, level + 1);
}
}
}
public class FlatFileEntry : FileEntry
{
public string Id { get; set; } = Guid.NewGuid().ToString();
public string ParentId { get; set; }
}
public class FileEntry
{
public string Name { get; set; }
public long Size { get; set; }
public string Path { get; set; }
public string Extension { get; set; }
public bool IsDirectory { get; set; }
public bool HasDirectories { get; set; }
public DateTime DateCreated { get; set; }
public DateTime DateCreatedUtc { get; set; }
public DateTime DateModified { get; set; }
public DateTime DateModifiedUtc { get; set; }
}
}
The problem is that the ValueChanged fires without an actual change in the Editor content - just click in it. I reproduce this issue in the following scenario:
Reproduction: https://blazorrepl.telerik.com/wfaxnvPv19jUCGhd15.
For example, when the OverflowMode of a Toolbar is set to ToolBarOverflowMode.None/Scroll, changing a tool’s parameters programmatically can cause overflowed tools to disappear.
Reproduction example: https://blazorrepl.telerik.com/mzYKQEYM23bGXmvN56
In the meantime, a possible alternative is to use Adaptive="false" instead OverflowMode="ToolBarOverflowMode.None"
Workaround:
<TelerikGrid Data="@GridData"
SelectionMode="@GridSelectionMode.Multiple"
SelectedItems="@SelectedItems"
SelectedItemsChanged="@( (IEnumerable<Employee> newSelected) => OnSelectedItemsChanged(newSelected) )"
Height="300px">
<GridToolBarTemplate>
<TelerikButton Enabled="@(SelectedItems.Any())" OnClick="@DeleteSelectedEmployees">Delete</TelerikButton>
</GridToolBarTemplate>
<GridColumns>
<GridCheckboxColumn SelectAll="true" />
<GridColumn Field="Name" Title="Name" />
<GridColumn Field="Team" Title="Team" />
</GridColumns>
</TelerikGrid>
@code {
private List<Employee> GridData { get; set; } = Enumerable.Range(1, 10).Select(i => new Employee
{
EmployeeId = i,
Name = $"Employee {i}",
Team = $"Team {i % 3}"
}).ToList();
private List<Employee> SelectedItems { get; set; } = new();
private void OnSelectedItemsChanged(IEnumerable<Employee> items)
{
SelectedItems = items.ToList();
}
private void DeleteSelectedEmployees()
{
if (SelectedItems.Any())
{
GridData = GridData.Except(SelectedItems).ToList();
SelectedItems.Clear();
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public override bool Equals(object obj) => obj is Employee e && e.EmployeeId == EmployeeId;
public override int GetHashCode() => EmployeeId.GetHashCode();
}
}
Hello,
We've come across a bug. It seems as whatever tool button(s) that should be selected is not shown correctly. It appears to show the previously selected.
Repro steps:
Is this an intended behaviour? Our users are confused :)
/Patrik
When downloading files via the TelerikPdfViewer bytes are added before and after the PDF Dokument.
Browsers are able to show the documents but you get and error message if you try to open the downloaded document in Acrobar Reader or in a DMS.
The document attached was download from the demo on your web site.
The issue is reproducible when the `AllowCustom` parameter is set to `true`.
Typing rapidly in the input field of the MultiColumnComboBox component causes the entered text to blink. Also, some of the inserted symbols are cleared.
Open this demo: https://demos.telerik.com/blazor-ui/multicolumncombobox/custom-values
Try to input text rapidly into the input field.
If a Chart is recreated at runtime and the mouse cursor is over the component, a JavaScript error may occur:
Error: Microsoft.JSInterop.JSException: null is not an object (evaluating 'e.top')
A possible workaround is to delay the Chart tooltip initialization a little:
<TelerikDrawer Data="@NavigablePages" Expanded="true" MiniMode="true" Mode="@DrawerMode.Push">
<DrawerContent>
<TelerikGridLayout>
<GridLayoutItems>
<GridLayoutItem Column="1">
<TelerikCard Width="300px" Height="400px">
<CardHeader>
<CardTitle>CARD 1</CardTitle>
</CardHeader>
<CardBody>
@if (IsLoading)
{
<span style="height:100%">...loading...</span>
}
else
{
<TelerikChart Transitions=@false>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut" Data="@donutData"
Field="@nameof(MyDonutChartModel.SegmentValue)" CategoryField="@nameof(MyDonutChartModel.SegmentName)">
<ChartSeriesTooltip Visible="@IsChartTooltipVisible" Background="#222731" Color="#FFFFFF">
<Template>
@((context.DataItem as MyDonutChartModel)?.Tooltip)
</Template>
</ChartSeriesTooltip>
</ChartSeries>
</ChartSeriesItems>
</TelerikChart>
}
</CardBody>
</TelerikCard>
</GridLayoutItem>
<GridLayoutItem Column="2">
<TelerikCard Width="300px" Height="400px">
<CardHeader>
<CardTitle>CARD 2</CardTitle>
</CardHeader>
<CardBody>
<TelerikButton OnClick="@OnClickHandler">REFRESH CHART</TelerikButton>
</CardBody>
</TelerikCard>
</GridLayoutItem>
</GridLayoutItems>
</TelerikGridLayout>
</DrawerContent>
</TelerikDrawer>
@code{
public bool IsLoading { get; set; } = false;
public bool IsChartTooltipVisible { get; set; } = true;
private async Task OnClickHandler()
{
IsLoading = true;
IsChartTooltipVisible = false;
// Simulate API call
await Task.Delay(2000);
IsLoading = false;
// Force the Chart to render
StateHasChanged();
// Delay the Chart Tooltip initialization
await Task.Delay(100);
IsChartTooltipVisible = true;
}
List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem>
{
new DrawerItem { Text = "Home", Icon = SvgIcon.Home }
};
public class DrawerItem
{
public string Text { get; set; }
public ISvgIcon Icon { get; set; }
}
public class MyDonutChartModel
{
public string SegmentName { get; set; }
public double SegmentValue { get; set; }
public string Tooltip { get; set; }
}
public List<MyDonutChartModel> donutData = new List<MyDonutChartModel>
{
new MyDonutChartModel
{
SegmentName = "Product 1",
SegmentValue = 2,
Tooltip = "Tooltip 1"
},
new MyDonutChartModel
{
SegmentName = "Product 2",
SegmentValue = 3,
Tooltip = "Tooltip 2"
},
new MyDonutChartModel
{
SegmentName = "Product 3",
SegmentValue = 4,
Tooltip = "Tooltip 3"
}
};
}
Using the TelerikTabSrip, If the first tab is not visible when rendered, the tab content for all tabs doesnt render.
Replicated here https://blazorrepl.telerik.com/cpEWGOPk22VW8be254
If you change the code to make the first tab visible, all is well.
You can make other tabs invisible, and all is well.
There is a bug with clear button in TelerikNumericTextBox. Steps to reproduce:
code:
<TelerikNumericTextBox @bind-Value="@Price1" ShowClearButton=true/>
<p>Price: @Price1</p>
@code {
private decimal? Price1 { get; set; }
}Here is a short demo:
The PdfViewer GetFileAsync() method works in version 11.3.0, but only if the PDF Viewer loads a file by default. If the component renders blank and the user opens a file first, then the method still doesn't work and returns null.
Test page: https://blazorrepl.telerik.com/cpvuGQby16J4JlsE42
<p>Load a PDF file from your computer in both PDF Viewers and click the buttons.</p>
<strong>@TestResult</strong>
<br /><br />
<TelerikButton OnClick="@OnLoadButtonClick1" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Get Current PDF 1</TelerikButton>
<TelerikPdfViewer @ref="@PdfViewerRef1"
Data="@PdfViewerData1"
AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
Height="400px">
</TelerikPdfViewer>
<TelerikButton OnClick="@OnLoadButtonClick2" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Get Current PDF 2</TelerikButton>
<TelerikPdfViewer @ref="@PdfViewerRef2"
Data="@PdfViewerData2"
AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
Height="400px">
</TelerikPdfViewer>
@code {
#nullable enable
private TelerikPdfViewer? PdfViewerRef1 { get; set; }
private TelerikPdfViewer? PdfViewerRef2 { get; set; }
private byte[]? PdfViewerData1 { get; set; }
private byte[]? PdfViewerData2 { get; set; }
private string TestResult { get; set; } = string.Empty;
private async Task OnLoadButtonClick1()
{
var pdfSource = await PdfViewerRef1!.GetFileAsync();
TestResult = $"First PDF Viewer GetFileAsync() returned {pdfSource} at {DateTime.Now.ToString("HH:mm:ss")}";
}
private async Task OnLoadButtonClick2()
{
var pdfSource = await PdfViewerRef2!.GetFileAsync();
TestResult = $"Second PDF Viewer GetFileAsync() returned {(pdfSource != null ? pdfSource.ToString() : "null")} at {DateTime.Now.ToString("HH:mm:ss")}";
}
protected override void OnInitialized()
{
PdfViewerData1 = Convert.FromBase64String(PdfBase64);
}
private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy0zMCAtNjQgMjcwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihQREYgRmlsZSAuLi4pIFRqCkVUCmVuZHN0cmVhbQplbmRvYmoKeHJlZgowIDUKMDAwMDAwMDAwMCA2NTUzNSBmCjAwMDAwMDAwMjEgMDAwMDAgbgowMDAwMDAwMDg2IDAwMDAwIG4KMDAwMDAwMDE5NSAwMDAwMCBuCjAwMDAwMDA0OTAgMDAwMDAgbgp0cmFpbGVyIDw8ICAvUm9vdCAxIDAgUiAvU2l6ZSA1ID4+CnN0YXJ0eHJlZgo2MDkKJSVFT0Y=";
}
Image is not uploaded in 2 scenarios on Chrome for Android 16.
On a device with Android go to https://demos.telerik.com/blazor-ui/upload/validation
Case 1:
Case 2:
In both cases the image is not uploaded.
The image is uploaded
Chrome
No response
When displaying the LoaderContainer spinner overlay, the visual blocking works correctly (the spinner appears over the entire page). However, users can still navigate through interactive elements behind the loader using the keyboard — for example, by pressing Tab or Shift+Tab.
They can even trigger buttons or input actions using the Space or Enter keys while the loader is active.
Regression that is observed in version 11.2.0. The system time should be at least 55 minutes past the hour (e.g., 13:55 or 14:57).
Related to: #12372
The TimePicker ignores the highlighted minutes part (45) and sets the minutes to 00. For example, if your current system time is 13:55, clicking the Set button will set the value to 13:00.
The highlighted minutes should be set in the value. For example, if your current system time is 13:55, clicking the Set button should set the value to 13:45.
All
No response
After the user selects a color in the color tools, the popup does not close automatically. The user has to click on the Editor's toolbar for the popup to close.
After selecting a color, the color tool's popup remains open.
The color tool's popup closes.
All
No response
The AdaptiveToolBar does not display all items in the overflow section (more buttons) when there are Buttons with Visibility set to false.
Run the REPL snippet
Shrink the window size so that the toolbar is narrower and some buttons are hidden
Open the Overflow list
Refresh and Refresh All buttons are missing from the list
Buttons with Visible=false parameter should not affect the overflowed button collection.
All buttons that are Visible=true and overflowed should be available in the more buttons section.
All
All