Questions on UI for Blazor Forum

1 answer

882 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

107 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

156 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

209 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

1 answer

300 views

Upload control! Basic example ?

{ Note! I am a desktop dev, very little Web.. so bare with my dumb ?s }

My issue is with the line: file.CopyToAsync

I dont see that CopyToAsync. Guessing becuase my file = file in args.Files

How can I get that CopyToAsync, so I can upload a file?

Thanks in advance.

I have on my razor page

<div class="k-form-field">
     <label class="k-label k-form-label">Files:</label>
     <div class="k-form-field-wrap">
         <TelerikUpload Id="DuffUpLoader"
                         SaveUrl="@SaveUrl"
                         RemoveUrl="@RemoveUrl"
                         OnUpload="@OnUpload"
                         AutoUpload="false">
         </TelerikUpload>
     </div>
</div>

in my behind the code:

public string SaveUrl => ToAbsoluteUrl("Resources/upload/save");
public string RemoveUrl => ToAbsoluteUrl("Resources/upload/remove");

private async Task OnUpload(UploadEventArgs args)
{

    foreach (var file in args.Files)
    {

        using (var fileStream = new FileStream(SaveUrl, FileMode.Create))
        {
            await file.CopyToAsync(fileStream);
        };

        //await using FileStream fs = new(SaveUrl, FileMode.Create);
        //await file.OpenReadStream().CopyToAsync(fs);
    };

}

Upload

answered on 06 Oct 2023

1 answer

1.5K+ views

Telerik Media Query Error

Hi,

When migrating a WebAssembly Blazor App, this error happens:

Could not find 'TelerikBlazor.initMediaQuery' ('TelerikBlazor' was undefined).

Thanks,

General Discussions

answered on 06 Oct 2023

1 answer

163 views

Masked Textbox - Allow Insert?

We are using a masked textbox to allow users to enter a US phone number, formatted as 000-000-0000, so all digits are required. The user is collecting a phone number from someone on a telephone call. Most of the time, the caller provides their phone number area code first, then they give the 7 digit number, so that works great. But sometimes, the caller doesn't think about giving their area code. In that case, the number looks like:

555-555-5, which is not right. Then we have to ask the caller for their area code. If the user clicks before the first 5, and starts typing, they overwrite the existing numbers. We would like it to insert the area code and push everything else to the right. If there are already 10 digits and we just want to change a number, then overwrite.

Does that make sense? Is that something that can be done?

MaskedTextBox

answered on 06 Oct 2023

0 answers

130 views

Detached FontIcons from Themes

As of R3 2023 release, the font icons are detached from the themes css files. If you are still using font icons, make sure to include a reference to the font icons in your applications. You can read more information about the change in the following blog post: https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes. It contains essential information about the change for all products and migration articles to svg icons.

General Discussions

asked on 06 Oct 2023

1 answer

172 views

Is it possible to change style of text field for TelerikRadioGroup.

I want to do something like this:

RadioGroup

Styling

answered on 05 Oct 2023

0 answers

96 views

how fexid menu in a Telerik MultiColumn ComboBox in Blazor is not appearing close to the input

</div>

<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-12">
<label for="Year-select" class="k-label k-form-label">QuestionNumber </label>
</div>
<div class="col-md-8 col-lg-8 col-xs-12">

<TelerikMultiColumnComboBox Value="@Parameter.Id"
Id="Year-select"
ScrollMode="@DropDownScrollMode.Virtual"
Data="@Data"
ValueField="@(nameof(Model.Id))"
TextField="@(nameof(Model.Description))"
Width="75%"
PageSize="30"
ItemHeight="35"
Filterable="true"
FilterOperator="@Telerik.Blazor.StringFilterOperator.Contains"
ListHeight="260px"
Placeholder="New"
>
<MultiColumnComboBoxColumns>
<MultiColumnComboBoxColumn Title="Description" Field="@nameof(Model.TextMajorDescription)" />
</MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>
<TelerikLoader Class="loader-indicator" ThemeColor="light" ></TelerikLoader>
</div>
</div>
</div>

MultiColumnComboBox

asked on 04 Oct 2023