I have a cascading DropDownList scenario with virtual scrolling. When the first DropDownList changes value, the second one should reset its scrollbar to the top, because it now contains new data. This doesn't happen.

Here is a REPL test page.

===

ADMIN EDIT

===

As a workaround for the time being, you may track when the value is changed in the parent DropDownList to dispose and re-initialize the child DropDownList.

Here is an example: https://blazorrepl.telerik.com/mdafHabk585ZtzyV54.

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.

• The PDF Viewer does not display the initial file if Zoom is set to FitToWidth or FitToPage. This is due to --scale-factor: NaN; --total-scale-factor: NaN; set on the PDF Viewer element.
• If the PDF Viewer initially shows with no loaded file, setting Zoom to FitToWidth or FitToPage initially or after opening a file leads to infinity zoom due to --scale-factor: Infinity; --total-scale-factor: Infinity; set on the PDF Viewer element.

The only scenario that works is to set the initial Zoom to a numeric value and have an open file by default.

I am trying to look at the times 7pm - midnight.  But if I set the end time to midnight, I get an error that the end time has to be greater than the start time.  How do I set the timeline to show 7pm - midnight or 8pm - 2am?

I tried including the next date in the EndTime but the Scheduler does not take the date into consideration, it checks only the time portion.

At the moment, typing with the keyboard focuses the first item that starts with the last letter you pressed. To focus the next one you should either use Down Arrow, or type the same letter again.

I would like it to behave like the regular <select> or like a combo box with filtering - typing characters quickly should highlight the item that begins with all those characters, instead of using only the first letter.

=== 

Admit edit: some keywords for better findability: DropDownList keyboard search filter accessibility

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

Reproduction of the problem

(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

Current behavior

(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.

Expected/desired behavior

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.

Environment

• Kendo/Telerik version: 14.1.0
• jQuery version:
• Browser: [all ]

Bug report

Reproduction of the problem

(bug report only)

1. Run this example: https://blazorrepl.telerik.com/mUOqQflm56D4xScx54
2. Select a font in the FontFamily dropdown.
3. Click the UnorderedList tool in the Editor’s toolbar.
4. A bullet is added and the FontFamily tool loses its value.
5. Click right after the added bullet.
6. Once again select a font in the FontFamily drodown.
7. Click the UnorderedList tool in the Editor’s toolbar to remove the bullet.
8. The FontFamily tool loses its value.

Current behavior

(optional)
Provide additional information if the steps for reproducing the faulty behavior are not sufficient to describe the issue.

Expected/desired behavior

The FontFamily tool should keep its value when an unordered list is added/removed.

Environment

• Kendo/Telerik version: 14.0.0
• Browser: [all]

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.

Description

When the ComboBox is bound with the OnRead event, after filtering and pressing the Tab key the highlighted item that matches the user input is not selected. If the ComboBox is bound through the Data parameter, the highlighted item is selected as expected.

Steps To Reproduce

1. Run this REPL example: https://blazorrepl.telerik.com/GKOwYyuD25UuABfR07
2. Focus the ComboBox and type in "BMW"
3. Press the Tab key.

Actual Behavior

The ComboBox is blurred and the BMW item is not selected.

Expected Behavior

The ComboBox is blurred and the BMW item is selected.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

Description

Appointment editing does not work on Chrome for mobile (Android).

Steps To Reproduce

Run the following demo in the Chrome for mobile browser, on a mobile device with Android : https://demos.telerik.com/blazor-ui/scheduler/appointment-editing

1. Attempt to edit an appointment by double tapping it

Actual Behavior

The popup editor does not show up.

Expected Behavior

The popup editor shows up.

Browser

Chrome

Last working version of Telerik UI for Blazor (if regression)

No response

I have been having issues adding the month view to a Telerik Blazor scheduler component, when there is grouping. It gives a null reference error any time I try to switch to the month view. I also tried it using the available demo for grouping in Telerik REPL, the only difference I found between my code and the demo was that I had used the ItemsPerSlot parameter.  I added this to the demo, and was able to reproduce the error I was seeing, and I have attached the console output from the REPL demo. I believe there is either a bug with the ItemsPerSlot being used in conjunction with grouping on a scheduler component, or some instruction missing from how to set it up properly to prevent this null reference issue. 

Changed code:

<SchedulerMonthView ItemsPerSlot="5"></SchedulerMonthView>

Demo used:

Blazor Scheduler (Event Calendar) Demos - Grouping | Telerik UI for Blazor

With Blazor server, clicking the NOW button (obviously) sets the time to the time on the server since that's where the code is running. Is there a way to trap the NOW button click or somehow give it an offset or define the value that NOW means so NOW will mean the time that the user is sitting in?

---

TELERIK EDIT

In the meantime, here are a few possible workarounds:

1. Use the DateTimePicker's ValueChanged event to detect new values that are very close or match the server's current DateTime. In such cases, you can assume that the user has clicked on TODAY / NOW, and set the local user time as a component value.

Server Time on UI Refresh: @DateTime.Now.ToLongTimeString()
<br />
User Local Time on Page Load: @LocalTime?.ToLongTimeString()
<br />
User Local Time Offset: @LocalOffset
<br />
<br />

<TelerikDateTimePicker Value="@PickerValue"
                       ValueChanged="@( (DateTime? newValue) => PickerValueChanged(newValue) )"
                       ValueExpression="@( () => LocalTime )"
                       Format="yyyy-MMM-dd HH:mm:ss"
                       Width="240px" />

<!-- Move JS code to a separate JS file in production -->
<script suppress-error="BL9992">
    function getLocalTime() {
        var d = new Date();
        return d.getTimezoneOffset();
    }
</script>

@code {
    private DateTime? PickerValue { get; set; }
    private DateTime? LocalTime { get; set; }
    private int LocalOffset { get; set; }

    private void PickerValueChanged(DateTime? newValue)
    {
        DateTime serverNow = DateTime.Now;
        DateTime utcNow = DateTime.UtcNow;
        TimeSpan nowTolerance = new TimeSpan(0, 0, 10);

        if (newValue - serverNow < nowTolerance)
        {
            PickerValue = utcNow.AddMinutes(-LocalOffset);
        }
        else
        {
            PickerValue = newValue;
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            LocalOffset = await js.InvokeAsync<int>("getLocalTime");
            LocalTime = DateTime.UtcNow.AddMinutes(-LocalOffset);
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

2. Use the DatePicker's HeaderTemplate with a custom TODAY / NOW button. 

3. Hide the NOW button with CSS:

<style>
    .no-now-button .k-time-now {
        display: none;
    }
</style>

<TelerikDateTimePicker @bind-Value="@PickerValue"
                       Format="yyyy-MMM-dd HH:mm:ss"
                       PopupClass="no-now-button"
                       Width="240px" />

@code {
    private DateTime? PickerValue { get; set; }
}

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" />
&nbsp;&nbsp;
<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" />
&nbsp;&nbsp;
<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.

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:

1. Utilize a custom Editor's tool that opens a Window or Dialog containing a FileManager.
2. Use the FileManager's SelectedItemsChanged event to determine which image the user wants to insert into the Editor.
3. Programmatically execute the Editor's insertImage command.

I would like to see icon support for the switch control.  See the attached screen shot for the use case.