Questions on UI for Blazor Forum

1 answer

283 views

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

91 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

163 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.8K+ 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

864 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

99 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

151 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

193 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

289 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);
    };

}