The Grid component creates an invalid property value in its style for the <table> tag like shown below (some of the contents omitted for brevity). Notice the "width: ;" which should have a value in it.
<table style="height: auto; width: ;"></table>
This can be observed for example by creating a page with the below code and the using the browsers developer tools to examine the elements. Both Grids will have their CSS width property be invalid.
<TelerikGrid Data="@data" AutoGenerateColumns="true">
</TelerikGrid>
<TelerikGrid Width="200px" Data="@data" AutoGenerateColumns="true">
</TelerikGrid>
@code {
private List<Product> data = new () {
new Product() {
Id = 2,
Name = "Hello product"
}
};
public class Product {
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
}
}
I have a splitter pane with 3 panels. If you resize the left panels (drag it back and forth), then the right panels incrementally increases in size. Similarly with anything more than 2 panels.
https://blazorrepl.telerik.com/GpOKaRFn37OSfEyp53
Grab any of the left splitters and drag them back and forth quickly. You will see the right panels increasing in size.
The problem occurs in Google Chrome when the pane Size is set in percent.
Adaptive Toolbar buttons do not appear in the overflow popups when expected.
https://demos.telerik.com/blazor-ui/toolbar/adaptive
https://blazorrepl.telerik.com/mTuAEzPe41y4e7y637
Use the slider to reduce the witdh of the toolbars
Visible buttons that disappear from the toolbar do not appear in the two popups.
Visible buttons that disappear from the toolbar should appear in the overflow popup.
All
8.1.1
When new data is loaded in the Breadcrumb, if at that moment some of the old items are hidden (because the browser window is too narrow), once the component visualizes the new data, the last item remains hidden.
Workaround
Add the following CSS to the page:
<style>
.k-breadcrumb-last-item {
display: inline-block !important;
}
.k-breadcrumb-last-item .k-breadcrumb-link {
display: inline-flex !important;
}
</style>
The Breadcrumb's last item ("Breadcrumb B 2") is hidden.
Another issue reproducible after loading more than 2 items in the Button's click handler is the Breadcrumb begins to flicker on pane (browser window) resize. The flickering is caused by items showing/hiding almost at the same time.
The behavior should remain as it is on initial load. The first and last items should always be visible.
No flickering should occur and there should be a smooth transition between hiding and showing an item.
All
No response
Hello:
I am using column menu in a gantt component. In version 8.1.1 the selection of columns to display was working correctly, but when upgrading to version 9.0.0 I get an error using the same implementation. The error received is:
blazor.web.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
at Telerik.Blazor.Components.Common.ColumnMenu.ColumnMenu`1.<OnColumnChooserColumnVisibilityChange>d__188[[BlazorRepl.UserComponents.__Main.FlatModel, BlazorRepl.UserComponents, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at Telerik.Blazor.Components.Common.ColumnMenu.ColumnMenuChooser.OnApplyClick()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
You can replicate the error from online examples just by adding or removing visible columns.
https://www.telerik.com/blazor-ui/documentation/components/gantt/gantt-tree/columns/menu
I need to use this functionality with TelerikĀ® UI for Blazor version 9.0.0.
When is it planned to solve this error? Is there a workaround I can apply?
Regards.
The OnPaneResize (and SizeChanged) event does NOT fire when a pane is unpinned. When it flies out from the left, resizing the flyout does not fire events that would letus refresh the chart to fill the new size.
Reproduced in this REPL: https://blazorrepl.telerik.com/mfkqODwk35srscZe46
The Expand/Collapse icon of the PivotGrid is always a font one. I am using SVG icons in my app and I don't see the any icon in the toggle button.
===
ADMIN EDIT
===
A workaround for the time being is to register the Font icons stylesheet even if you are using SVG icons.
Form validation triggers unexpectedly and too early when:
Test page: https://blazorrepl.telerik.com/mzOUOolG385hImjN13
I am working on a form where experienced agents need to input data quickly. Often enough they know the codes and so they can type them in the combo box, but they shouldn't have to look for the mouse to select the item, the combo box should select it when the user presses Tab to move to the next field.
This should happen only when the user has filtered the combo box so they see some items (and so the dropdown is open) - I want them to be able to select only items from the available options, AllowCustom does not work for me.
---
ADMIN EDIT
Here is one workaround you can consider:
https://blazorrepl.telerik.com/QoOAPyEZ233YP2AX19
@inject IJSRuntime js
@* Move this script to a separate JS file *@
<script suppress-error="BL9992">
function getHighligtedComboItem() {
// Get the currently focused item in this particular ComboBox.
var focusedItem = document.querySelector(".select-on-tab .k-list-item.k-focus");
if (focusedItem) {
return focusedItem.innerText;
}
}
</script>
<p>FirstFilteredItem: @FirstFilteredItem</p>
<p>Selected value: @ComboBoxValue</p>
<span onkeyup="@GetFirstFilteredItem">
<TelerikComboBox Data="@ComboBoxData"
Value="@ComboBoxValue"
ValueChanged="@( (int newValue) => ComboBoxValueChanged(newValue) )"
TextField="@nameof(ListItem.Text)"
ValueField="@nameof(ListItem.Value)"
Filterable="true"
FilterOperator="@StringFilterOperator.Contains"
OnBlur="@SelectItemOnTab"
OnOpen="@( () => IsComboBoxOpen = true )"
OnClose="@( () => IsComboBoxOpen = false )"
Placeholder="Select an item..."
ClearButton="true"
Width="200px">
<ComboBoxSettings>
<ComboBoxPopupSettings Class="select-on-tab" />
</ComboBoxSettings>
</TelerikComboBox>
</span>
<input placeholder="another form element" />
@code {
private IEnumerable<ListItem> ComboBoxData = Enumerable.Range(1, 123).Select(x => new ListItem { Text = "Item " + x, Value = x });
private int ComboBoxValue { get; set; }
private string FirstFilteredItem { get; set; } = string.Empty;
private bool IsComboBoxOpen { get; set; }
private async Task GetFirstFilteredItem(KeyboardEventArgs args)
{
if (!IsComboBoxOpen)
{
// Wait at least 300ms, which is the opening animation.
await Task.Delay(400);
}
else
{
// Wait, depending on the typical filtering time.
await Task.Delay(300);
}
// The code that will find the item text depends on the exact scenario and potential use of ItemTemplate.
FirstFilteredItem = await js.InvokeAsync<string>("getHighligtedComboItem");
}
private void SelectItemOnTab()
{
if (!string.IsNullOrEmpty(FirstFilteredItem))
{
// Match the filter operation to the filter operator of the ComboBox.
var matchingItem = ComboBoxData.Where(x => x.Text.ToLowerInvariant().Contains(FirstFilteredItem.Trim().ToLowerInvariant())).FirstOrDefault();
if (matchingItem != null)
{
ComboBoxValue = matchingItem.Value;
FirstFilteredItem = string.Empty;
}
}
}
private void ComboBoxValueChanged(int newValue)
{
ComboBoxValue = newValue;
FirstFilteredItem = string.Empty;
}
public class ListItem
{
public int Value { get; set; }
public string Text { get; set; } = string.Empty;
}
}
File data is not available in the Upload's OnSuccess event.
Regression in version 9.0.0 introduced with the addition of the chunk upload functionality.
https://github.com/telerik/blazor/blob/master/js/telerik-blazor/src/upload/upload.ts#L282-L288
<TelerikUpload SaveUrl="/api/upload/save"
RemoveUrl="/api/upload/remove"
OnSuccess="@OnSuccessHandler" />
@code {
async Task OnSuccessHandler(UploadSuccessEventArgs e)
{
foreach (var file in e.Files)
{
Console.WriteLine($"Name = {file.Name}, Size = {file.Size}, Extension = {file.Extension}");
}
StateHasChanged();
}
}
The properties have their default values (null for Name and Extension and 0 for Size).
The actual file data is accessible in the OnSuccess event handler.
All
8.1.1
I would like to have possibility to put sorting and filtering icons in second row or at least second line in TelerikGrid header. To follow our project design I need to have 1 header row with header titles, and second row with sorting and filtering. Or at least one table header row with sorting and filtering icons in 2 line. Is this somehow possible to achieve?
If the Grid has no data, selecting null PageSize throws:
Error: System.ArgumentException: Page Size cannot be less than one (Parameter 'PageSize')
---
ADMIN EDIT
---
A possible workaround for the time being will be to use some conditional CSS to disable the PageSize dropdown while there is no data in the Grid: https://blazorrepl.telerik.com/QcOpkTlb38EDFboT34.
When the user renames a folder, the TreeView foes not refresh to display the new folder name.
The test page below is based on the FileManager Events example.
A possible workaround is to recreate the FileManager in the OnUpdate handler:
@using System.IO
@if (ShouldRenderFileManager)
{
<TelerikFileManager @ref="@FileManagerRef"
Data="@Files"
@bind-Path="@DirectoryPath"
View="@CurrentView"
ViewChanged="@OnViewChanged"
Height="400px"
OnCreate="@OnCreateHandler"
OnUpdate="@OnUpdateHandler"
OnDelete="@OnDeleteHandler"
OnModelInit="@OnModelInitHandler"
OnDownload="@OnDownloadHandler"
SelectedItems="@SelectedItems"
SelectedItemsChanged="@((IEnumerable<FlatFileEntry> selectedFiles) => OnSelect(selectedFiles))">
</TelerikFileManager>
}
@foreach (var item in Files)
{
<div>@item.Name</div>
}
@code {
private bool ShouldRenderFileManager { get; set; } = true;
private TelerikFileManager<FlatFileEntry>? FileManagerRef { get; set; }
private List<FlatFileEntry> Files { get; set; } = new();
private string DirectoryPath { get; set; } = string.Empty;
private IEnumerable<FlatFileEntry> SelectedItems { get; set; } = new List<FlatFileEntry>();
private FileManagerViewType CurrentView { get; set; }
private void OnViewChanged(FileManagerViewType newView)
{
CurrentView = newView;
}
private async Task OnCreateHandler(FileManagerCreateEventArgs args)
{
var newFolder = args.Item as FlatFileEntry;
var parent = GetParent(newFolder, DirectoryPath);
newFolder.Id = "20";
newFolder.ParentId = parent.Id;
newFolder.Name = "New folder";
newFolder.IsDirectory = true;
newFolder.HasDirectories = false;
newFolder.DateCreated = DateTime.Now;
newFolder.DateCreatedUtc = DateTime.Now;
newFolder.DateModified = DateTime.Now;
newFolder.DateModifiedUtc = DateTime.Now;
newFolder.Path = Path.Combine(DirectoryPath, newFolder.Name);
newFolder.Extension = null;
var parentDirectory = GetDirectory(DirectoryPath) ?? GetParent(newFolder, DirectoryPath);
if (parentDirectory != null)
{
// Simulate add to the file system.
newFolder.ParentId = parentDirectory.Id;
Files.Add(newFolder);
parentDirectory.HasDirectories = Files.Count(x => x.ParentId == parentDirectory.Id) > 0;
}
else
{
// Create a folder in the root directory.
Files.Add(newFolder);
}
RefreshData();
}
private FlatFileEntry GetDirectory(string path)
{
var directory = Files.FirstOrDefault(x => x.IsDirectory && x.Path == path);
return directory;
}
private FlatFileEntry GetParent(FlatFileEntry currItem, string currDirectory)
{
var parentItem = Files
.FirstOrDefault(x => x.IsDirectory && x.Path == currDirectory);
return parentItem;
}
private async Task OnUpdateHandler(FileManagerUpdateEventArgs args)
{
var item = args.Item as FlatFileEntry;
if (item.IsDirectory)
{
var name = item.Name ?? string.Empty;
var updatedItem = Files.FirstOrDefault(x => x.Id == item.Id);
updatedItem.Name = item.Name;
updatedItem.Path = Path.Combine(DirectoryPath, name);
ShouldRenderFileManager = false;
await Task.Delay(1);
ShouldRenderFileManager = true;
}
else
{
// The name property is updated, but also update the path to the file.
var name = item.Name ?? string.Empty;
var extension = item.Extension ?? string.Empty;
var fullName = extension.Length > 0 && name.EndsWith(extension) ?
name : $"{name}{extension}";
var updatedItem = Files.FirstOrDefault(x => x.Id == item.Id);
updatedItem.Name = item.Name;
updatedItem.Path = Path.Combine(DirectoryPath, fullName);
Console.WriteLine(updatedItem.Path);
}
}
private async Task OnDownloadHandler(FileManagerDownloadEventArgs args)
{
var selectedItem = args.Item as FlatFileEntry;
// The Filemanager does not have the actual file.
// Obtain the file contents, based on args.Item, and set the event arguments:
//args.Stream = the file stream of the actual selected file;
//args.MimeType = the MIME type of the actual file;
//args.FileName = the file name that the browser will receive (optional);
FlatFileEntry actualFile = (FlatFileEntry)args.Item;
string dummyFileContent = $"This file is a dummy version of {actualFile.Name}. It was downloaded with the Telerik Blazor FileManager.";
byte[] dummyFileBuffer = System.Text.Encoding.UTF8.GetBytes(dummyFileContent);
args.Stream = new MemoryStream(dummyFileBuffer);
args.MimeType = "text/plain";
args.FileName = $"filemanager-{actualFile.Name}-{DateTime.Now.ToString("yyyy-MM-dd-HH-mm-ss")}.txt";
}
private async Task OnDeleteHandler(FileManagerDeleteEventArgs args)
{
var currItem = args.Item as FlatFileEntry;
var itemToDelete = Files.FirstOrDefault(x => x.Id == currItem.Id);
Files.Remove(itemToDelete);
RefreshData();
}
private FlatFileEntry OnModelInitHandler()
{
var item = new FlatFileEntry();
item.Name = $"New folder";
item.Size = 0;
item.Path = Path.Combine(DirectoryPath, item.Name);
item.IsDirectory = true;
item.HasDirectories = false;
item.DateCreated = DateTime.Now;
item.DateCreatedUtc = DateTime.Now;
item.DateModified = DateTime.Now;
item.DateModifiedUtc = DateTime.Now;
return item;
}
private void OnSelect(IEnumerable<FlatFileEntry> selectedFiles)
{
// Update the view model.
SelectedItems = selectedFiles;
}
private void RefreshData()
{
Files = new List<FlatFileEntry>(Files);
}
protected override async Task OnInitializedAsync()
{
Files = await GetFlatFileEntries();
}
public class FlatFileEntry
{
public string Id { get; set; }
public string ParentId { get; set; }
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 next lines are hardcoded data generation so you can explore the FileManager freely
private async Task<List<FlatFileEntry>> GetFlatFileEntries()
{
var workFiles = new FlatFileEntry()
{
Id = "1",
ParentId = null,
Name = "Work Files",
IsDirectory = true,
HasDirectories = true,
DateCreated = new DateTime(2022, 1, 2),
DateCreatedUtc = new DateTime(2022, 1, 2),
DateModified = new DateTime(2022, 2, 3),
DateModifiedUtc = new DateTime(2022, 2, 3),
Path = Path.Combine("files"),
Size = 3 * 1024 * 1024
};
var Documents = new FlatFileEntry()
{
Id = "2",
ParentId = workFiles.Id,
Name = "Documents",
IsDirectory = true,
HasDirectories = false,
DateCreated = new DateTime(2022, 1, 2),
DateCreatedUtc = new DateTime(2022, 1, 2),
DateModified = new DateTime(2022, 2, 3),
DateModifiedUtc = new DateTime(2022, 2, 3),
Path = Path.Combine(workFiles.Path, "documents"),
Size = 1024 * 1024
};
var Images = new FlatFileEntry()
{
Id = "3",
ParentId = workFiles.Id,
Name = "Images",
IsDirectory = true,
HasDirectories = false,
DateCreated = new DateTime(2022, 1, 2),
DateCreatedUtc = new DateTime(2022, 1, 2),
DateModified = new DateTime(2022, 2, 3),
DateModifiedUtc = new DateTime(2022, 2, 3),
Path = Path.Combine(workFiles.Path, "images"),
Size = 2 * 1024 * 1024
};
var files = new List<FlatFileEntry>()
{
workFiles,
Documents,
Images
};
return files;
}
}
When I click on the NumericTextBox arrows the ValueChanged event is triggered twice.
https://blazorrepl.telerik.com/czEGPYbP19b16IVZ49
When double-clicking a cell in the All Day Row of the scheduler, one would expect that the IsAllDay field would be set to true in the SchedulerEditEventArgs similar to the way the start and end dates represent the date and time of the cell that was double-clicked. Unfortunately, the IsAllDay field is always false.
The following Repl taken from the demo reflects this: https://blazorrepl.telerik.com/mzYQvZvC394NLH0H06
Is there a way to determine if the double-clicked cell is in the All Day Row?
Thanks,
Mike
The DateRangePicker's Calendar popup will navigate to the Min value when the user deletes the currently selected EndValue.
https://blazorrepl.telerik.com/GzEPQoPw45otLVRU34
Select Start and End value.
Delete the End value.
The Calendar will show the Min value year, which is 1975 in this case. If Min is not set, the component will show 1900.
The problem occurs only with nullable values.
I am trying to make the Blazor Gantt control fill a container width and height.
If I set the height of the Gantt control to 100%, it resizes to fill the container except for the tree part of the Gantt control as it stays at whatever size the window was when it first loaded.
===== ADMIN EDIT =====
Meanwhile, as a workaround, you can add a bool flag that will refresh the whole Gantt upon resizing the container. Here is an example of this approach I have prepared at the following REPL link.