I've determined that the TelerikDateTimePicker does not work properly on mobile devices when using AdaptiveMode.Auto. Attached are videos of the component's behaviour in both modes (None, and Auto).
Immediately after interacting with the fullscreen popup of the datepicker, I see this error in the console:
RAW:
telerik-blazor.js:50 Uncaught TypeError: r.isParent is not a function
at p.isChild (telerik-blazor.js:50:1362352)
at f.closePopup (telerik-blazor.js:50:1398427)
at HTMLHtmlElement.onMouseDown (telerik-blazor.js:50:1397246)
Code:
@using Telerik.Blazor.Components
@using Telerik.Blazor
<TelerikFloatingLabel Text="Date & Time">
<TelerikDateTimePicker Id="date-picker" @bind-Value="MyFormModel.Date" Max="@DateTime.Now.AddDays(1)"
Format="@DATE_FORMAT" AdaptiveMode="AdaptiveMode.Auto"
FillMode="@Telerik.Blazor.ThemeConstants.DateTimePicker.FillMode.Flat" />
</TelerikFloatingLabel>
@code {
private FormModel MyFormModel { get; set; } = new FormModel();
private const string DATE_FORMAT = "MM/dd/yyyy HH:mm";
private class FormModel
{
public DateTime Date { get; set; }
}
}
Notes:
- If we remove all of the parent components wrapping the DatePicker, it seems to function properly, but the errors remain in the console. This isn't a solution, however.
We have a grid with a GridCheckboxColumn that we have configured through a '.unselectable-row' style so that certain elements cannot be selected (those elements with a padlock in the second column cannot be selected).
The grid works correctly in isolation, but when we add a TelerikLoaderContainer that is displayed during data loading process, the grid doesn't working properly: it is possible to select all the enabled elements of the grid using the button in the header of the checkbox column. However it is not possible to deselect them from the button in the header of the checkbox column when there is any unselectable element.
Here it is a link to REPL with a reproducible example: https://blazorrepl.telerik.com/GyYhYXPI24gIYgIJ03
To reproduce the problem, you sholud select all grid elements from the checkbox column header button and try to deselect them. You will not be able to deselect all the elements.
Now comment the LoaderContainer component and repeat the test. You will see that now it is possible to deselect correctly all the elements.
How can we deselect all the elements from the header while keeping the loadercontainer?
I am using ComboBox and I want to be able to filter by two model properties. To achieve this I have implemented custom filtering through the OnRead event. Additionally, I am ordering the data to first match the results from the one property, which also is used for the TextField, and after that to match the results from the other property. However, when the results are only from the match of the second property, there is no focus.
Here is a REPL example https://blazorrepl.telerik.com/wyaMQhEN108axXJ036
Steps to reproduce the issue:
Type "a": "Value test - ano" has the focus (the first option in the list)
Type "an": "Value test - ano" receives the focus (the first option in the list)
Type "ano": "Value test - ano" receives the focus (the first option in the list)
Type "anot": no item has focus despite the results being only "Another Value - val"
When SchedulerGroupOrientation is set to vertical, increasing the height of the `SchedulerResourceGroupHeader` breaks the rendering of the Scheduler cells, which causes misalignment of the appointments. In my scenario, I want to have a Button and an Icon in the group header cell.
Reproduction example: https://blazorrepl.telerik.com/wJElGYvF02XSsN6j42
This is a continuation of public item DatePicker, TimePicker and DateTimePicker should accept null value as valid when bound to nullable DateTime
The problem persist when:
Test page with workarounds:
Bug due to week day format string inconsistency between .NET and JavaScript (dddd vs EEEE):
<TelerikDateTimePicker @bind-Value="@SelectedTime"
ShowClearButton="true"
Width="360px">
<DateTimePickerFormatPlaceholder Weekday="week" />
</TelerikDateTimePicker>
<br />
<br />
Bug due to usage of a standard date format string:
<TelerikDatePicker @bind-Value="@SelectedTime"
ShowClearButton="true"
Format="d"
Width="360px">
<DateTimePickerFormatPlaceholder Day="dd" Month="mm" Year="yyyy" />
</TelerikDatePicker>
@code {
private DateTime? SelectedTime = DateTime.Now;
}
(bug report only)
Regression introduced in 13.0.0.
1. Run this example: https://blazorrepl.telerik.com/wUuSGClv00orFeRm59
(optional)
The Size, Rounded, FillMode parameters are ignored.
The parameter values should apply and change the appearance of the SearchBox.
The documented lazy loading scenario is not compatible with Telerik UI for Blazor 15.0.0, because of the new ITelerikIconService. Unlike the ITelerikStringLocalizer, there is no alternative way to register this icon service outside Program.cs.
We upgraded to the latest Telerik Blazor components (8.1.1).
I think there's a bug in the TabStrip when setting the index of the ActiveTabIndex or @bind-ActiveTabIndex.
The page will scroll to the active tab automatically.
Here's a link to the Repl - https://blazorrepl.telerik.com/GfaTEmbR45zQSzEq44
If you remove @bind-ActiveTabIndex="@ActiveTabIndex" from the TelerikTabStrip then the page load normally.
Thanks,
Cesar
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;
}
}
}
(bug report only)
1. Run this example: https://blazorrepl.telerik.com/cUaBGOOZ34pkp6wB57
2. Inspect the MultiSelect’s input.
3. Click within the component’s input area, to open its popup.
The issue is also reproducible in the other dropdown components: https://blazorrepl.telerik.com/GUurGmvw32oPqGYu03
(optional)
When the dropdown opens, an aria-controls attribute is applied to the MultiSelect’s input. Its value does not match any existing DOM element.
The value of the aria-controls attribute should point at an existing element (e.g., the popup’s list element: https://www.telerik.com/blazor-ui/documentation/components/multiselect/accessibility/wai-aria-support#multiselect-wrapping-element ). But in this case the MultiSelect is not bound to data and a list element is not rendered in the popup.
(bug report only)
(optional)
Provide additional information if the steps for reproducing the faulty behavior are not sufficient to describe the issue.
The FontFamily tool should keep its value when an unordered list is added/removed.
Example:
<PageTitle>Home</PageTitle>
<div>
<TelerikTextBox Width="20rem" Placeholder="Pallet" DebounceDelay="1000" @bind-Value="@_textInput" OnChange="@(async (input) => await OnInputChanged(input))" />
</div>
<p>@_textInput</p>
@code {
private string? _textInput;
private async Task OnInputChanged(object input)
{
Console.WriteLine($"Immediate: function parameter: {input}, bound variable: {_textInput}");
await Task.Delay(1000);
Console.WriteLine($"Delayed: function parameter: {input}, bound variable: {_textInput}");
//Make the OnChange event receive the immediate value when the DebounceDelay is set
}
}The DebounceDelay is set to 1 second to highlight the behavior, although we have observed it with delays less than 100 milliseconds when the input is from a barcode scanner and the Enter is part of the scan. Start the sample, type "123" in the input, and hit enter within 1 second.
The output in the console is:
Immediate: function parameter: , bound variable:
Delayed: function parameter: , bound variable: 123
When double-clicking a task in the Gantt Timeline, the popup edit form may not appear. Instead, the vertical blue band for task dragging may show.
The problem is more likely to occur when using a touchpad.
The only scenario that works is to set the initial Zoom to a numeric value and have an open file by default.
Currently, a TextField value of empty string will produce a blank item in the dropdown.
On the other hand, a null TextField value will produce the fully qualified class name.
Here are possible workarounds: https://blazorrepl.telerik.com/myOlFpFb1465jW8E07