Bug report

Reproduction of the problem

Environment

• Version 15.1.0
• Blazor Server, .NET 10
• Chromium (Chrome and Playwright headless)

Grid ColumnDraggable is never destroyed
In Components/Common/Grid/Rows/TableHeaderRow.cs, Dispose() calls base.Dispose() first, which sets IsDisposed = true. It then calls DestroyColumnDraggable(), which uses InvokeAsync<object>. That method returns early when IsDisposed is true (BaseComponent.InvokeAsync<T>), so destroyColumnDraggable is never sent to the browser. DestroyColumnReorderable() and DestroyColumnResizable() work because they use InvokeVoidAsync, which has no such check.

As a result, every grid with Reorderable="true" or Groupable="true" leaves "<dataId>-telerik-ColumnDraggable" in window.TelerikBlazor._instances. Its draggable.element (the grid's .k-grid-header) keeps the whole disposed page reachable, so the page is never garbage collected.

1. Create two routable pages. Page A has a TelerikGrid with Reorderable="true" and a TelerikTabStrip with a few tabs. Page B is empty.
2. Open Page A, then navigate to Page B with the in-app router (no full reload).
3. Run this in the browser console:

Object.entries(TelerikBlazor._instances)
     .filter(([k, i]) => i && i.element && !i.element.isConnected)
     .map(([k, i]) => k + ' / ' + i.constructor.name)

Sample project attached.

TelerikBlazorApp1.zip

Current behavior

(optional)
one "...-telerik-ColumnDraggable" entry per reorderable or groupable grid, all pointing at detached elements. Each pageA -> pageB round trip adds more, and the detached DOM is never released.

Expected/desired behavior

An empty array is returned. Page A's components were disposed, so their JS instances should have been destroyed.

Workaround

After each navigation, we destroy and remove any registered instance whose element is no longer in the page:

   const instances = window.TelerikBlazor && window.TelerikBlazor._instances;
   for (const key of Object.keys(instances || {})) {
       const i = instances[key];
       if (i && i.element && !i.element.isConnected) {
           try { i.destroy && i.destroy(); } catch (e) { }
           delete instances[key];
       }
   }

Suggested Fix

1. In TableHeaderRow.DestroyColumnDraggable(), use InvokeVoidAsync, as DestroyColumnReorderable() does. Or call the destroy methods before base.Dispose().

Environment

• Kendo/Telerik version:
• Browser: [Chrome XX, Firefox]

I have been trying to improve my Lighthouse score with Google and one of the items it is tagging is the "telerik-blazor.js" file.  I have seen new practices where the JavaScript is imported as needed, see this article here from Microsoft.

Can you please consider this in the future?

===

Telerik edit: A possible workaround is to build the Telerik JavaScript file without some of the components that you don't need.

The PDF Viewer may render parts of the contents as blank (empty space) and only form elements like checkboxes remain visible.

Test PDF file in ticket 1716925

My users use Tab to focus the masked textbox and when they start typing (its content was highlighted because of getting focus with Tab), that typing action does not put the range (caret) in the correct place - it remains at position 0 rather than going to position 1.

For example, in the below phone mask they type "9" and then "0" and I would expect to get "90" but I get "0".

---

ADMIN EDIT

A workaround is to collapse the range when the input gets focus:

@inject IJSRuntime JsInterop

<input />
<span @onfocusin="@CollapseInputSelection" @ref="@ParentElem">
    <TelerikMaskedTextBox Mask="+1 (000) 000-0000"
                          IncludeLiterals="true"
                          @bind-Value="@CellPhoneNumber"
                          Class="form-control" />
</span>

@* move this script to an actual script file instead of using this hack *@
<script suppress-error="BL9992">
    function collapseInputSelection(root) {
        setTimeout(function () {
            var input = root.querySelector("input");
            if (input) {
                input.setSelectionRange(0, 0);
            }
        }, 20);
    }
</script>

@code{
    string CellPhoneNumber { get; set; }

    ElementReference ParentElem { get; set; }
    async Task CollapseInputSelection()
    {
        await JsInterop.InvokeVoidAsync("collapseInputSelection", ParentElem);
    }
}

---

I want the user to only be able to select times between, for example, 11AM and 1PM. Setting Min and Max does not limit that, I can select any time:

A RadioGroup inside a Grid EditorTemplate will fire OnBlur when the user clicks on it. This will close the edit cell and (usually) not apply the new value.

Here is a test page: https://blazorrepl.telerik.com/wvbmkMvd48rpMN4547

The code below compiles and doesn't give any browser errors when run, but when you collapse a row, all data is collapsed and you can't expand it again.

If you change the line that generates the data to use a List instead of IEnumerable it will work as expected.

REPRODUCIBLE

<TelerikTreeList Data=Data
                 IdField="@nameof(Record.Id)"
                 ParentIdField="@nameof(Record.ParentId)"
                 Height="100%">
    <TreeListColumns>
        <TreeListCheckboxColumn CheckBoxOnlySelection="true" />
        <TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
        <TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
        <TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
    </TreeListColumns>
</TelerikTreeList>
@code {
    protected IEnumerable<Record> Data = new List<Record>();

    protected override void OnInitialized()
    {
        Data = Enumerable.Range(1, 10).Select(i => new Record(i));
    }

    public class Record
    {
        public Record(int i)
        {
            Id = i;
            if (i % 5 == 1)
                ParentId = null;
            else
                ParentId = (i - ((i - 1) % 5));
            Text = "Item " + i;
        }
        public long Id { get; set; }
        public long? ParentId { get; set; }
        public string Text { get; set; }
    }
} 

WORKAROUND

<TelerikTreeList Data=Data
                 IdField="@nameof(Record.Id)"
                 ParentIdField="@nameof(Record.ParentId)"
                 Height="100%">
    <TreeListColumns>
        <TreeListCheckboxColumn CheckBoxOnlySelection="true" />
        <TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
        <TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
        <TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
    </TreeListColumns>
</TelerikTreeList>
@code {
    protected List<Record> Data = new List<Record>();

    protected override void OnInitialized()
    {
        Data = Enumerable.Range(1, 10).Select(i => new Record(i)).ToList();
    }

    public class Record
    {
        public Record(int i)
        {
            Id = i;
            if (i % 5 == 1)
                ParentId = null;
            else
                ParentId = (i - ((i - 1) % 5));
            Text = "Item " + i;
        }
        public long Id { get; set; }
        public long? ParentId { get; set; }
        public string Text { get; set; }
    }
} 

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:

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.

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