Questions on UI for Blazor Forum

1 answer

503 views

I'm getting the below error as I'm trying to update to .net8. I've also created a bare minimum blazor web application with the same results. I'm not finding any Telerik .net8 documentation related to Blazor UI so I'm not sure what is missing? Is not.8 not currently supported?

"Unhandled exception rendering component: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app. Read more at: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#project-configuration."

Code

Program.cs

app.UseStaticFiles();

App.razor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorWebApp.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
    
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
</body>

</html>

MainLayout.razor

@inherits LayoutComponentBase

<TelerikRootComponent>
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            
                @Body
          
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>
</TelerikRootComponent>

counter

@page "/counter"
@using Telerik.Blazor.Components.Editor
@attribute [RenderModeInteractiveServer]

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<TelerikEditor @bind-Value="@Value"
			   Tools="@Tools"
			   Height="880px">
</TelerikEditor>

General Discussions

answered on 16 Oct 2023

1 answer

246 views

Grid: show Loading component on filter or page size changes

I am working with a grid that uses paging. One of the options I expose to the user is to allow for a page size of "all" to show all records. When selected, it can take the grid 10-20 seconds to display all those records, but there is no indication to the user that there is processing going on. I saw another ticket that mentioned using the PageSizeChanged & onRead event to display a loading image, but that loading image is still delayed.

Is there another way to achieve the goal of showing a loading spinner when the grid is doing larger operations. Paging, filtering, etc...

Thanks in advance

Grid

answered on 13 Oct 2023

1 answer

266 views

Custom FontIcon is not loaded

Hi,
I'm upgrading my Telerik version to 4.6.0 and when I want to use custom FontIcon the icon is not displayed. I see in the HTML that my icon content is defined the same in both situations.

It work with the FontIcon.FilterClear but not with the custom:

<TelerikButton Icon="@FontIcon.FilterClear"> Font Icon Button <TelerikButton />
<TelerikButton Icon="@("k-icon k-i-filter-clear")">Custon Font Icon Button<TelerikButton />

Button

answered on 13 Oct 2023

1 answer

87 views

Open dropdown only if exists filtered items

Hi, in a combobox with filter and custom values, if user start typing and there are no items corresponding to the filter the dropdown is open also if it is empty.

Is it possibile to avoid this and open dropdown only if there are items?

PS. Also Autocomplete component have same behaviour

Thank you

ComboBox

answered on 12 Oct 2023

1 answer

152 views

Set row height (style) for Gantt control

I have a user requesting to change the row height (style) for a Gantt control. The user made a similar request for a TreeList and a Grid and I was able to identify the properties in css and override them with padding-block and padding-line. I tried the same for the Gantt control but those properties did not achieve the desired result.

Here is the spacing they want that I was able to set for the TreeList and Grid controls:

I was able to achieve that with the following css:

.k-grid-md td, .k-grid-md .k-table-td, .k-button-md {
padding-block: 0;
padding-inline: 0;
}

The k-button-md was needed to reduce the padding if there was a command button on the row.

Here is what the Gantt control looks like now:

Any suggestions on how to achieve the same on the Gantt control?

Gantt

answered on 12 Oct 2023

2 answers

1.7K+ views

font awesome integration

Hello

Could Font Awesome be used with Telerik Blazor? And if so, how do I integrate and use it into the project?

Thank you.

Kind regards

Styling

answered on 11 Oct 2023

1 answer

847 views

Net8 support?

I tried following the https://www.telerik.com/blogs/net-8-release-candidate-delivers-smoother-out-box-experience-blazor

On trivial pages it works ok, but if i add something like the example from the wizard https://demos.telerik.com/blazor-ui/wizard/overview then it throws when it swaps from server to wasm:

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app. Read more at: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#project-configuration
      System.Exception: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app. Read more at: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#project-configuration
         at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragment.OnInitializedAsync()
         at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'vu1d5OeY0l1wssueGrhRNuYFT4GHFJylXQODsHtTPgI'.
      System.Exception: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app. Read more at: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#project-configuration
         at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragment.OnInitializedAsync()
         at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: Cannot access a disposed object.
      System.ObjectDisposedException: Cannot access a disposed object.
         at Microsoft.AspNetCore.Components.RenderTree.ArrayBuilder`1.GrowBuffer(Int32 desiredCapacity)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
         at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'vu1d5OeY0l1wssueGrhRNuYFT4GHFJylXQODsHtTPgI'.
      System.ObjectDisposedException: Cannot access a disposed object.
         at Microsoft.AspNetCore.Components.RenderTree.ArrayBuilder`1.GrowBuffer(Int32 desiredCapacity)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
         at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

which is a really weird error, since I do have that, and the trivial examples work (like changing the button in Counter.cs to a TelerikButton)

sometimes the error origins on the client instead:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app. Read more at: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#project-configuration System.Exception: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app. Read more at: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#project-configuration at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragment.OnInitializedAsync() at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync() fr @ blazor.web.js:1 (anonymous) @ invoke-js.ts:176 El @ invoke-js.ts:276 $func350 @ 00b1e17a:0x1faed $func246 @ 00b1e17a:0x1bf8a $func239 @ 00b1e17a:0xf171 $func273 @ 00b1e17a:0x1d1af $func3183 @ 00b1e17a:0xe7ef0 $func2504 @ 00b1e17a:0xbdcfe $func2510 @ 00b1e17a:0xbe4bd $func2534 @ 00b1e17a:0xc0b04 $mono_wasm_invoke_method_bound @ 00b1e17a:0xa524 Module._mono_wasm_invoke_method_bound @ dotnet.native.8.0.0-…9.4.qccqbfnfqo.js:8 Sr @ invoke-cs.ts:273 (anonymous) @ invoke-cs.ts:247 beginInvokeDotNetFromJS @ blazor.web.js:1 invokeDotNetMethodAsync @ blazor.web.js:1 invokeMethodAsync @ blazor.web.js:1 refreshRootComponents @ blazor.web.js:1 refreshAllRootComponents @ blazor.web.js:1 documentUpdated @ blazor.web.js:1 ai @ blazor.web.js:1 await in ai (async) (anonymous) @ blazor.web.js:1 Ae @ blazor.web.js:1 ri @ blazor.web.js:1

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read properties of null (reading 'addEventListener')
      TypeError: Cannot read properties of null (reading 'addEventListener')
          at r.bindPickerEvents (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1133819)
          at r.setOptions (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1132575)
          at new s (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1132083)
          at new r (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1125051)
          at e.initComponent (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1077272)
          at e.initDatePicker (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1124871)
          at https://localhost:7226/_framework/blazor.web.js:1:3244
          at new Promise (<anonymous>)
          at v.beginInvokeJSFromDotNet (https://localhost:7226/_framework/blazor.web.js:1:3201)
          at Object.Ur [as invokeJSJson] (https://localhost:7226/_framework/blazor.web.js:1:146334)
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener')
TypeError: Cannot read properties of null (reading 'addEventListener')
    at r.bindPickerEvents (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1133819)
    at r.setOptions (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1132575)
    at new s (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1132083)
    at new r (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1125051)
    at e.initComponent (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1077272)
    at e.initDatePicker (https://localhost:7226/_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js:50:1124871)
    at https://localhost:7226/_framework/blazor.web.js:1:3244
    at new Promise (<anonymous>)
    at v.beginInvokeJSFromDotNet (https://localhost:7226/_framework/blazor.web.js:1:3201)
    at Object.Ur [as invokeJSJson] (https://localhost:7226/_framework/blazor.web.js:1:146334)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Telerik.Blazor.Components.Common.Pickers.TelerikPickerBase`1.<InitPicker>d__127[[System.Nullable`1[[System.DateTime, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
   at Telerik.Blazor.Components.Common.Pickers.TelerikPickerBase`1.<OnAfterRenderAsync>d__123[[System.Nullable`1[[System.DateTime, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

ie, copy demo code to some page in the client.

add

<h1>@(RuntimeInformation.ProcessArchitecture == Architecture.Wasm ? "Wasm" : "Server")</h1>

add

@attribute [RenderModeAuto]

Tried various combinations of setting RenderMode in .razor file or in app.razor, same problem

General Discussions

answered on 10 Oct 2023

1 answer

97 views

SizeChangedHandler In Splitter, can it fire before releasing the mouse?

In my current development project, which is based on Blazor, I extensively use the splitter in conjunction with BlazorSize to manage overflow and reconstruct the scrollbar.

While this setup works effectively, the user experience is not optimal. This is because the scrollbar, computed by BlazorSize, only appears after the mouse button is released. I considered utilizing the SizeChanged event to address this issue, but it too is triggered only after the mouse button is released.

Is there a way to configure the Splitter to trigger these events during the dragging motion, rather than waiting until the mouse button is released?

Splitter

answered on 10 Oct 2023

2 answers

143 views

How to set small for all controls

Is there a way to set small "sm" for all controls global?

so I can avoid

<TelerikGrid Data="@ChildCores"
             Size="sm"

Styling

answered on 09 Oct 2023

0 answers

174 views

Blazor Telerik Grid TITem

Hello,

I am using telerik ui for blazor version 3.7.0 where i am implementing telerik grid onread method .This method have TItem as ABC<T> where ABC and T both are classes.While representing this kind of generic classes in TItem the data is not being populated to the grid .Is this an issue in telerik or am i not following the correct structure for generic representation in TITem?

The snippet of sample code is attached here:https://blazorrepl.telerik.com/GRvaYjEe11IMof9t20

Thanks

Grid

asked on 09 Oct 2023