In a filterable Grid, if a column is not bound to a field from the model the Grid uses, it throws with:
Error: System.ArgumentNullException: Value cannot be null. (Parameter 'nullableType')
Reproduction: https://blazorrepl.telerik.com/GyEUlFEs04AUJoJ601.
The issue is reproducible :
===
ADMIN EDIT
===
A possible workaround for the time being is to set the FieldType of the column: https://blazorrepl.telerik.com/wSugvFui10jhcpZy00.
Goal
Our application needs to allow end users to dynamically customize the Telerik Blazor DockManager at runtime by:
These changes should be fully user-driven and persisted so that:
In short, we want the DockManager to behave as a customizable dashboard whose state can be reliably stored and reloaded from our database.
Problem
The current Telerik Blazor DockManager implementation requires panels to be declared in Razor markup (markup driven) and managed through an external data source.
This creates several challenges:
As a result, implementing a truly dynamic and persistent DockManager layout requires complex workarounds that are fragile and difficult to maintain.
Feature Request
We propose enhancing the DockManager with first-class support for dynamic panel synchronization by introducing:
Two coordinated parameters:
Expected behavior:
This would allow developers to treat the DockManager as a true data-driven component, similar to other Telerik Blazor controls, without needing to manually modify internal state structures.
When you select a date in DropDownList with dates in it (List<DateTime>), the @bind-Value is shaving off the milliseconds.
===ADMIN EDIT===
In the meantime, as a workaround for displaying milliseconds correctly, you can bind the DropDownList to a model. This way, you can use the "Id" to retrieve the selected item and display its precise milliseconds. Below is an example I've prepared to demonstrate this approach:
Selected value: @myDdlData.ToList().Where(x => x.Id == selectedValueId).FirstOrDefault()?.MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff")
<br />
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="Id"
@bind-Value="selectedValueId">
</TelerikDropDownList>
@code {
public class MyDdlModel
{
public int Id { get; set; }
public DateTime MyValueField { get; set; }
public string MyTextField => MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff"); // Display formatted DateTime
}
private int selectedValueId { get; set; } = 1;
private IEnumerable<MyDdlModel> myDdlData = GenerateRandomDateTimes(20);
private static IEnumerable<MyDdlModel> GenerateRandomDateTimes(int count)
{
Random random = new Random();
DateTime startDate = DateTime.Now;
return Enumerable.Range(1, count)
.Select(x => new MyDdlModel
{
Id = x, // Unique integer Id
MyValueField = startDate.AddDays(x)
.AddMinutes(random.Next(0, 60))
.AddSeconds(random.Next(0, 60))
.AddMilliseconds(random.Next(0, 1000))
}).ToList();
}
}
If the ComboBox Value is set during initialization and the ValueMapper executes too fast and before the component has rendered, its Value doesn't show.
The problem also occurs in the MultiColumnComboBox.
Possible workarounds:
To reproduce:
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<p>ComboBox Value: @ComboBoxValue</p>
<TelerikComboBox ItemHeight="30"
OnRead="@OnComboBoxRead"
PageSize="20"
ScrollMode="@DropDownScrollMode.Virtual"
TItem="@ListItem"
TValue="@(int?)"
@bind-Value="@ComboBoxValue"
ValueMapper="@ComboBoxValueMapper"
Width="240px" />
@code {
private List<ListItem>? ComboBoxData { get; set; }
private int? ComboBoxValue { get; set; } = 3;
private async Task OnComboBoxRead(ReadEventArgs args)
{
DataSourceResult result = await ComboBoxData.ToDataSourceResultAsync(args.Request);
args.Data = result.Data;
args.Total = result.Total;
}
private async Task<ListItem?> ComboBoxValueMapper(int? selectValue)
{
// Triggers the bug
await Task.Yield();
ListItem? result = ComboBoxData?.FirstOrDefault(x => selectValue == x.Value);
return result;
}
protected override void OnInitialized()
{
ComboBoxData = Enumerable
.Range(1, 1234)
.Select(x => new ListItem()
{
Value = x,
Text = $"Item {x}"
})
.ToList();
}
public class ListItem
{
public int Value { get; set; }
public string Text { get; set; } = string.Empty;
}
}
How to reproduce:
The regression was introduced in version 12.2.0. The last version that works correctly is 12.0.0.
The possible workarounds are:
@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid @ref="@GridRef"
OnRead="@OnGridRead"
TItem="@Product"
EditMode="@GridEditMode.Incell"
OnCreate="@OnGridCreate"
OnDelete="@OnGridDelete"
OnUpdate="@OnGridUpdate"
Height="600px">
<GridToolBarTemplate>
<GridCommandButton Command="Add">Add Item</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(Product.Name)">
<EditorTemplate>
@{ var dataItem = (Product)context; }
<span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Name)) )">
<TelerikTextBox @bind-Value="@dataItem.Name" />
</span>
</EditorTemplate>
</GridColumn>
@* <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
<GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" /> *@
<GridColumn Field="@nameof(Product.Discontinued)" Width="120px">
<EditorTemplate>
@{ var dataItem = (Product)context; }
<span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Discontinued)) )">
<TelerikCheckBox @bind-Value="@dataItem.Discontinued" />
</span>
</EditorTemplate>
</GridColumn>
<GridCommandColumn Width="180px">
<GridCommandButton Command="Delete">Delete</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Product>? GridRef { get; set; }
private ProductService GridProductService { get; set; } = new();
private async Task OnGridCellFocusOut(string field)
{
await Task.Delay(100);
if (GridRef is null)
{
return;
}
GridState<Product> gridState = GridRef.GetState();
Product? editItem = gridState.EditItem as Product;
if (editItem is null)
{
return;
}
GridCommandEventArgs args = new GridCommandEventArgs()
{
Field = field,
Item = editItem
};
await OnGridUpdate(args);
gridState.EditField = default;
gridState.EditItem = default!;
gridState.OriginalEditItem = default!;
await GridRef.SetStateAsync(gridState);
}
private async Task OnGridCreate(GridCommandEventArgs args)
{
var createdItem = (Product)args.Item;
await GridProductService.Create(createdItem);
}
private async Task OnGridDelete(GridCommandEventArgs args)
{
var deletedItem = (Product)args.Item;
await GridProductService.Delete(deletedItem);
}
private async Task OnGridRead(GridReadEventArgs args)
{
DataSourceResult result = await GridProductService.Read(args.Request);
args.Data = result.Data;
args.Total = result.Total;
args.AggregateResults = result.AggregateResults;
}
private async Task OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (Product)args.Item;
await GridProductService.Update(updatedItem);
}
public class Product
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
public decimal? Price { get; set; }
public int Quantity { get; set; }
[Required]
public DateTime? ReleaseDate { get; set; }
public bool Discontinued { get; set; }
}
#region Data Service
public class ProductService
{
private List<Product> Items { get; set; } = new();
private int LastId { get; set; }
public async Task<int> Create(Product product)
{
await SimulateAsyncOperation();
product.Id = ++LastId;
Items.Insert(0, product);
return LastId;
}
public async Task<bool> Delete(Product product)
{
await SimulateAsyncOperation();
if (Items.Contains(product))
{
Items.Remove(product);
return true;
}
return false;
}
public async Task<List<Product>> Read()
{
await SimulateAsyncOperation();
return Items;
}
public async Task<DataSourceResult> Read(DataSourceRequest request)
{
return await Items.ToDataSourceResultAsync(request);
}
public async Task<bool> Update(Product product)
{
await SimulateAsyncOperation();
int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);
if (originalItemIndex != -1)
{
Items[originalItemIndex] = product;
return true;
}
return false;
}
private async Task SimulateAsyncOperation()
{
await Task.Delay(100);
}
public ProductService(int itemCount = 5)
{
Random rnd = Random.Shared;
for (int i = 1; i <= itemCount; i++)
{
Items.Add(new Product()
{
Id = ++LastId,
Name = $"Product {LastId}",
Description = $"Multi-line\ndescription {LastId}",
Price = LastId % 2 == 0 ? null : rnd.Next(0, 100) * 1.23m,
Quantity = LastId % 2 == 0 ? 0 : rnd.Next(0, 3000),
ReleaseDate = DateTime.Today.AddDays(-rnd.Next(365, 3650)),
Discontinued = LastId % 2 == 0
});
}
}
}
#endregion Data Service
}
I am resetting the Grid State by calling Grid.SetState(null). This doesn't reset ColumnState<T>.Locked boolean to false and the columns remain locked.
---
ADMIN EDIT
---
A possible workaround for the time being is to additionally loop through the ColumnStates collection of the State and set the Locked property to false for each column.
Possibly related to https://github.com/telerik/blazor/issues/2594
(optional)
The first locked column (ID) is rendered after the second locked column (Product Name). When you resize a non-locked column, the ID column disappears and is revealed at its new position after you scroll the Grid horizontally.
The behavior is reproducible with RTL enabled.
The order of the locked columns should persist.
DatePicker cursor not advancing after month input. The problem arises when dd/MMM/yyyy format is applied.
To reproduce the issue open this REPL example. Type any date in the second DatePicker. When inserting a month value the cursor is not moved to the year section.
After inserting a month the cursor should be moved to the year section. As when no format is applied (the first DatePicker)When a table row does not have any cells, there might be lots of script errors when hovering the empty row with the mouse.
The error is the following:
Sometimes we even have a server error:
Microsoft.JSInterop.JSException: Not a table node: table_wrapper
RangeError: Not a table node: table_wrapper
at https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1557112
at pl.get (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1558816)
at https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1638148
at Be.decorations (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1638538)
at https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1529498
at Wa.someProp (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1548718)
at Fa (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1529464)
at Wa.updateStateInner (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1545305)
at Wa.update (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1544591)
at Wa.setProps (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1544734)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikEditor.SetOptions()
at Telerik.Blazor.Components.TelerikEditor.OnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
The server error is really hard to recreate, but it seems like users that has a slow computer and hovers the editor directly when loading gets this error sometimes...
Here is the source code (hovering the empty row will generate scripting errors):
<TelerikEditor Height="300px" @bind-Value="@Value" EditMode="Telerik.Blazor.EditorEditMode.Iframe" ReadOnly="true">
</TelerikEditor>
@code {
public string Value { get; set; } =
@"
<table>
<tbody>
<tr>
<td>
Some text
</td>
</tr>
<tr style=""height: 24px"">
</tr>
<tr>
<td>
Some text
</td>
</tr>
</tbody>
</table>
";
}The Tooltip component throws a JavaScript error when the user opens an adaptive dropdown component and tries to interact with it:
Uncaught TypeError: popup.isParent is not a function
Here is a test page. Open the DropDownList on a narrow screen and click on the adaptive ActionSheet.
<TelerikButton Class="tooltip-target" Title="Telerik Tooltip">Button</TelerikButton>
<TelerikDropDownList Data="@ListItems"
@bind-Value="@SelectedValue"
TextField="@nameof(ListItem.Text)"
ValueField="@nameof(ListItem.Id)"
AdaptiveMode="@AdaptiveMode.Auto"
Width="300px" />
<TelerikTooltip TargetSelector=".tooltip-target"
ShowOn="@TooltipShowEvent.Hover" />
@code {
private List<ListItem> ListItems { get; set; } = new();
private int SelectedValue { get; set; } = 3;
protected override void OnInitialized()
{
ListItems = new List<ListItem>();
for (int i = 1; i <= 5; i++)
{
ListItems.Add(new ListItem()
{
Id = i,
Text = $"Item {i}",
Category = $"Category {i % 6 + 1}"
});
}
base.OnInitialized();
}
public class ListItem
{
public int Id { get; set; }
public string Text { get; set; } = string.Empty;
public string Category { get; set; } = string.Empty;
}
}
When the dropdown is open, the button's aria-controls attribute references a value that matches the popup's data-id, not its actual id. Since aria-controls must point to an element's id, the attribute is invalid and no element in the DOM matches the reference, breaking the accessible relationship between the button and its popup.
aria-controls="50dc5df2-b83e-41bd-8c34-98470aba77c6"
data-id="50dc5df2-b83e-41bd-8c34-98470aba77c6" id="8630d4e4-2f22-4eaf-b96c-7cae113b70ed"
<TelerikDropDownButton Icon="@SvgIcon.Share" OnClick="@(()=>OnItemClick("Primary"))">
<DropDownButtonContent>Share</DropDownButtonContent>
<DropDownButtonItems>
<DropDownButtonItem Icon="@SvgIcon.Facebook" OnClick="@(()=>OnItemClick("Facebook"))">Facebook</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Twitter" OnClick="@(()=>OnItemClick("Twitter"))">Twitter</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Linkedin" OnClick="@(()=>OnItemClick("Linkedin"))">Linkedin</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Reddit" OnClick="@(()=>OnItemClick("Reddit"))">Reddit</DropDownButtonItem>
</DropDownButtonItems>
</TelerikDropDownButton>If LoadGroupsOnDemand="false", I am able to programmatically expand the groups through the state. However, this is not possible when loading group data on demand.
Please allow programmatically expanding the groups when LoadGroupsOnDemand="true". This should go together with an event (OnStateChanged?) that will fire when LOD groups are expanded or collapsed.
Currently, on mobile devices (where is no hover), to open the child menu you need to click/tap the parent and the only way close it afterwards is if you click away. This is not very convenient for mobile usage. I want to be able to close the child menu on click/tap of the parent as well.