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.

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 my understanding, the simplest way to get a coding agent provide better assistance to a very specific product like telerik blazor, is by just providing the documentation. 

My first experiments with the telerik mcp server are not succesful. I would think that linking the full documentation directly to the coding agent can seriously lead to better results.

AI Coding agents are doing a great job with more standard frontend framework like react, they seem to be common knowledge. We know that Blazor and in particular Telerik blazor is a niche product (not only niche, but also NICE), so coding agents needs to have clear instructions on everything.

Of course, i don't know how your documentation system works, and how easy it would be to generate .md files from this?

Thanks for looking into this matter

Don't hesitate to contact me directly for further questions or whatsoever.

warm regards

paul

I would like a Blazor PropertyGrid with

-- that could be bound to an instance of a custom Type that implemented INotifyPropertyChanged

-- with expandable/collapsible sections with the ability to prevent a  user from expanding a collapsed section (e.g. the user lacks privileges to see that section's data)

-- would keep track of its UI state including collapsed sections (similar to the excellent implementation in Telerik's  Blazor Grid)

-- that would allow the use of all Telerik Blazor editors as cell-value editors

I am interested in using this component primarily as a data-entry UX in a data-entry-intensive line-of-business application.  Such a grid offers standard navigation on all data-entry screens in the application, eliminating tab-order, thereby greatly simplifying the end-user experience. The expanding/collapsing sections make it very economical in its use of screen real-estate. I have used such a component (from a competitor of Telerik) in a WinForms application with excellent results. 

Bug report

Reproduction of the problem

(bug report only)
Environment

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

TabStrip Tab is never destroyed
Components/TabStrip/Tab.razor.cs registers each tab with initTabStripTab in OnAfterRenderAsync. Its Dispose() only releases the DotNetObjectReference; it never calls InvokeDisposeAsync(). The JS Tab.destroy() method is therefore never called, and TabStrip.destroy() does not destroy its child tabs. Every tab stays in window.TelerikBlazor._instances with its detached <li class="k-tabstrip-item">, which again keeps the disposed page reachable.

1. Create two routable pages. PageA has TabStrip with 3 tabs. PageB is empty.
2. Open PageA, then navigate to PageB 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 entry per TabStrip tab is returned, 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. PageA'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 Tab.Dispose(), call InvokeDisposeAsync() before base.Dispose(), as TelerikTabStrip.Dispose() does.

Environment

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

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 following exception occurs:

Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.

............

at Telerik.Blazor.Components.Common.Loader.ComponentLoaderContainer.DisposeAsync()

When the user closes the browser and the web page contains any of the below components:

• DockManager
• FileManager
• Grid
• ListView
• PdfViewer
• PivotGrid
• Scheduler
• SpreadSheet
• TreeList

We'd like to track the community demand for using the Telerik Blazor components as Custom Elements.

Please share example common scenarios for such usage and list the components you want to register as Custom Elements to use in other SPA frameworks such as Angular or React.

I noticed that when the ReadTimeout property of the FileSelect's FileInfoStream is read, the code seem to block completely.

You will find a Blazor Web App project attached to this ticket showcasing the issue.

When enabling/disabling a form element that is defined in a child component, the element is successfully disabled, however a console error occurs. The error occurs whether the child component makes the update or the parent makes the update through a passed parameter.  The error does not occur for form elements defined in the parent.  The error does not occur for basic html input elements defined in the child. 

Element definition:

<TelerikTextBox 
     Id="ElementMisc" 
     AutoComplete="new-password" 
     @bind-Value="@_searchModel.ElementMisc" 
     Enabled="!_elementSelectMode" 
     class="textbox-75"
     DebounceDelay="0">
 </TelerikTextBox>

Update Code defined in child:

 if (results.Data.Count > 1)
 {   
     _elementSelectMode= true;
     StateHasChanged();

 }

Console Error:

Uncaught (in promise) Error: Assertion failed - heap is currently locked
    at mr (blazor.web.js:1:158963)
    at Object.beginInvokeDotNetFromJS (blazor.web.js:1:157244)
    at w.invokeDotNetMethodAsync (blazor.web.js:1:3978)
    at C.invokeMethodAsync (blazor.web.js:1:5486)
    at r.invokeMethodAsync (telerik-blazor.js:22:1272553)
    at r.onBlur (telerik-blazor.js:22:1463592)
    at ye.setOrRemoveAttributeOrProperty (blazor.web.js:1:28630)
    at ye.applyAttribute (blazor.web.js:1:27574)
    at ye.applyEdits (blazor.web.js:1:24601)
    at ye.updateComponent (blazor.web.js:1:23606)

If user input should control which pointers that are visible as in this example:

@page "/gauge"

<div>
    <TelerikCheckBox Id="display_second" @bind-Value=_displaySecond></TelerikCheckBox>
    <label for="display_second">Display second pointer</label>
</div>

<TelerikRadialGauge>
    <RadialGaugePointers>
        <RadialGaugePointer Value="55" />
        
        @if (_displaySecond)
        {
            <RadialGaugePointer Value="75" Color="red" />
        }
    </RadialGaugePointers>
</TelerikRadialGauge>

@code {
    bool _displaySecond;
}

The size of the RadialGauge is not set correctly if changing properties from user input.

@page "/gauge"

<div>
    <TelerikCheckBox Id="large" @bind-Value=_large ></TelerikCheckBox>
    <label for="large">Large</label>
</div>


<TelerikRadialGauge Width=@(_large ? "500px" : "200px") Height=@(_large ? "500px" : "200px")>
    <RadialGaugePointers>
        <RadialGaugePointer Value="55" />
    </RadialGaugePointers>
</TelerikRadialGauge>

@code {
    bool _large;
}

Nothing happens with the gauge in the example above, I would expect it to be larger when ticking the checkbox.

If using F12 in the browser I can see that the outer element get the correct size, but not the inner svg...