Entering dates in the Blazor spreadsheet act weird if you enter a 2 digit year. It seems to subtract a day when you remove focus from the cell.
Start by entering a date like 2/2/25:
Then hit enter or otherwise remove focus from the cell and this is what it changes it to. Notice it subtracts a day:
Then put focus back on the cell:
Now look at the editor at the top:
I note that when you enter a two digit year in Excel it defaults the century to 20 when you enter a year less than 30. It defaults a century of 19 when you enter a year >= 30. It appears that with the Telerik Blazor spreadsheet it always defaults the century to 19. You can make arguments on either side of that but the real issue here is that it subtracts a day when you enter a two digit year. It doesn't do that when you enter a 4 digit year.
The related thing that becomes an issue is when you export the spreadsheet to a byte array and evaluate the cell RawValue. When you enter a 4 digit year, you get a raw value that is a positive number and you can use FormatHelper.ConvertDoubleToDateTime to get the date value. When you enter a 2 digit year and get the raw value, it is a negative number, and when you call FormatHelper.ConvertDoubleToDateTime it returns null.
Can you please comment on the rhyme or reason the spreadsheet behaves this way? Or is this a bug(s)?
Thanks.
The ContextMenu components triggers a page scroll up on first opening. The problem may be specific to WebAssembly apps. Here is a test page with an applied workaround:
https://blazorrepl.telerik.com/wglavwvy31XgaQIJ18
The important code in the above example is:
<TelerikContextMenu @ref="@ContextMenuRef" />
@code {
private TelerikContextMenu<ContextMenuItem> ContextMenuRef { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && ContextMenuRef is not null)
{
await Task.Delay(1);
await ContextMenuRef.ShowAsync(1, 1);
await ContextMenuRef.HideAsync();
}
}
}
I'm trying to use the Blazor editor but the "Insert Image" function is very basic. Previously using Webforms & Core the insert image in the editor presented the user with a file management and image upload popup. Is this functionality available with the Blazor component?
=====ADMIN EDIT=====
Possible alternative:
The NOW button in the TimePicker's TimeView sets the time value, according to the server's time zone. Instead, it should use the client-side (user) time zone.
===
Telerik edit:
In the meantime, you can subscribe to the TimePicker's ValueChanged event and detect when the user clicks on Now. In such cases, the event handler will receive the current server time with a small margin of error, that depends on the latency.
<TelerikTimePicker Value="@TimePickerValue"
ValueChanged="@( (DateTime? d) => TimePickerValueChanged(d) )">
</TelerikTimePicker>
@code {
private DateTime? TimePickerValue { get; set; }
private void TimePickerValueChanged(DateTime? newValue)
{
if (newValue.HasValue && newValue - DateTime.Now < new TimeSpan(0, 0, 1))
{
// Retrieve and set the correct user's local time. The dummy code below is just for testing.
TimePickerValue = DateTime.Now.AddMinutes(2);
}
else
{
TimePickerValue = newValue;
}
}
}
I would like to see icon support for the switch control. See the attached screen shot for the use case.
Try with culture es-ES and you will see the problem.
When es-ES, "dot [.]" is not a decimal separator, therefore you can't use the "NumpadDecimal" key to write a decimal number.
@using System.Globalization
<b>Culture:</b> @CultureInfo.CurrentCulture.Name;
<br />
<b>Culture UI:</b> @CultureInfo.CurrentUICulture.Name
<br />
<b>DefaultThreadCurrentCulture:</b> @CultureInfo.DefaultThreadCurrentCulture?.Name
<br />
<b>DefaultThreadCurrentUICulture:</b> @CultureInfo.DefaultThreadCurrentUICulture?.Name
<br /><br />
<b>Val 1:</b>
<TelerikNumericTextBox @bind-Value="@Val1" Decimals="6" Width="100px" />
<TelerikNumericTextBox @bind-Value="@Val1" Decimals="6" Width="100px" />
<input type="number" @bind-value="@Val1" step="any" style="width: 100px" />
<br />
<b>Val 2:</b>
<input type="number" @bind-value="@Val2" step="any" style="width: 100px" />
<input type="number" @bind-value="@Val2" step="any" style="width: 100px" />
@code {
decimal Val1 { get; set; }
decimal Val2 { get; set; }
protected override void OnInitialized()
{
CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("es-ES");
//CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("en-US");
}
}
[ADMIN EDIT]
In general, our components obey the culture that is set in the application. If the current culture requires a "," decimal separator, our component will accept commas and ignore dots. Our component doesn't know if the user is pressing the decimal separator key on the numeric pad, or the "standard" [ > . ] key.
What we can do to improve the behavior is to implement a feature for automatic handling of the decimal separator character. In other words, if the component detects invalid decimal separator input, it will switch to the correct one. This feature will handle the Numpad key and output it in the right culture.
Here is a possible workaround that uses JavaScript to intercept the "other" decimal separator and insert the "correct" one in the NumericTextBox.
@inject IJSRuntime js
<span @onkeydown="@( (KeyboardEventArgs args) => OnSpanKeyDown(args, "ntb1") )">
<TelerikNumericTextBox @bind-Value="@DValue"
Width="200px"
Id="ntb1" />
</span>
Code: @LogCode , Key: @LogKey
<!-- Move JS to external JS file in production apps -->
<script suppress-error="BL9992">
function addDot(ntbId) {
var textbox = document.querySelector("#" + ntbId);
if (textbox && textbox.value.indexOf(".") == -1) { // or ","
textbox.value += "."; // or ","
}
}
</script>
@code {
decimal DValue { get; set; }
string LogCode { get; set; }
string LogKey { get; set; }
async Task OnSpanKeyDown(KeyboardEventArgs args, string ntbId)
{
LogCode = args.Code;
LogKey = args.Key;
if (args.Key == ",") // or "."
{
await js.InvokeVoidAsync("addDot", ntbId);
}
}
}Another option in the meantime is to use a standard HTML input or InputNumber with the Telerik CSS class "k-textbox". This way the input will look the same as a Telerik textbox and keep the app look consistent.
The default system prompt in the Editor's source code instructs the AI prompt to not output HTML. This can be overriden:
<TelerikEditor @bind-Value="@Value"
Tools="@Tools"
EnableAIPrompt="@EnableAIPromptPanel"
EnableInlineAIPrompt="true"
Height="500px">
<EditorSettings>
<EditorInlineAIPromptSettings SystemPrompt="...Your instructions here..." />
</EditorSettings>
</TelerikEditor>However, even when the AI Prompt outputs HTML, on attempting to Insert/Replace that HTML in the Editor, the output is added as plain text in a paragraph element, instead of being added as HTML. It would be nice to have the option to enable inserting/replacing actual HTML.
For example in DropDownList reflection is used for binding for TextField and ValueField.
As an additional option, I'd instead to be able to do DropDownList<FooBarModel> and then FooBarModel implements a Telerik interface IDropDownListItem (for example but use your naming conventions)
I agree you shouldn't remove the option of using TextField / ValueField but I'd like to see it as an option.
Doing the same thing in something like DataGrid I agree would be a ton more work and we'd likely require using source generation.
It seems that Microsoft / the industry is consistently recommending to phase out the use of reflection and have invested a bunch in making source generation much less of a pain and developer friendly.
(bug report only)
Run the following examples and click the Export button to export the Diagram:
https://blazorrepl.telerik.com/wUutGREi32uWDUbR56
https://blazorrepl.telerik.com/GgODmnEj48uNeygS34
(optional)
The generated PDF document contains only one page and some of the Diagram shapes are not exported.
The generated PDF document contains multiple pages and all the Diagram shapes are exported.
===
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.
I have a Telerik Pager within a Telerik Grid. If I select a larger page size within the pager, then select a smaller size and do not scroll, the next time I open the pager, the dropdown portion opens in the wrong place. When I view the inspect tool, it appears that the CSS top value is not being updated when changing page sizes from bigger to smaller. Is this a Telerik limitation with the pager?
In the images, we select items per page from 10 to 25, and then we go immediately from 25 to 10 items per page. Without scrolling, we click into the drop down list again and we are able to replicate this issue.
Before: Items per page: 10 -> 25
After:
Thank you in advance.
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.