Questions on UI for Blazor Forum

1 answer

56 views

Hello, i want use the treeview, i have many elements. so it stretch if i expand it over the screen, and this is not fine :)

so i want the treeview in the dropdown list. but it doestn work. it looks horrible. Have someone a idea or a soution. thank you.

this is my code. and i need a treeview. because i have expand items.

DropDownList

TreeView

answered on 24 Feb 2025

0 answers

42 views

TelerikTreeView can no longer expand single nodes since v7

Hello,

We recently upgraded to Telerik v7.0 for our controls and since then expanding a single item always expands all items. Has anyone else run into this or does anyone know a workaround?

TreeView

asked on 29 Jan 2025

1 answer

67 views

Switch instead of checkbox in TreeView

Is there a way to use a Switch control instead of checkbox in a TreeView? I am able to use ItemTemplate to insert a switch next to the checkbox but I need to replace the checkbox and have the switch use CheckChildren and CheckParents.

Any ideas?

Thanks!


<TelerikTreeView OnItemRender="@OnItemRender" CheckBoxMode="TreeViewCheckBoxMode.Multiple" CheckChildren="true" CheckParents="true" Data="@FlatData" @bind-ExpandedItems="@ExpandedItems">
    <TreeViewBindings>
        <TreeViewBinding TextField="Text" IdField="Id" ParentIdField="ParentId" ItemsField="Text" HasChildrenField="HasChildren" IconField="Icon">
            <ItemTemplate>
                @{var treeItem = (TreeItem)context; }
                <div class="treeview-item">
                    <TelerikSwitch @bind-Value="treeItem.IsChecked" />
                    <span>@treeItem.Text</span>
                </div>
            </ItemTemplate>
        </TreeViewBinding>
    </TreeViewBindings>
</TelerikTreeView>

Switch

TreeView

answered on 02 Jan 2025

1 answer

254 views

TreeView Disposing/Error

In my blazor app I'm seeing the TelerikTreeView is erroring out during garbage collection or disposing when I switching between pages too quickly in my. Is there something I can do to suppress this error or add some nullcheck so this doesnt appear in my logs?

Here is the error I'm getting:

Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener') TypeError: Cannot read properties of null (reading 'addEventListener') at c.bindEvents (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1282242) at new c (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1282116) at e.initComponent (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1085487) at e.initTreeView (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1279920) at https://0.0.0.0/_framework/blazor.webview.js:1:3337 at new Promise (<anonymous>) at beginInvokeJSFromDotNet (https://0.0.0.0/_framework/blazor.webview.js:1:3311) at https://0.0.0.0/_framework/blazor.webview.js:1:42795 at EventTarget.<anonymous> (<anonymous>:7:62) at EmbeddedBrowserWebView.<anonymous> (<anonymous>:1:40673)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikTreeView.InitTreeView()
at Telerik.Blazor.Components.TelerikTreeView.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener') TypeError: Cannot read properties of null (reading 'addEventListener') at c.bindEvents (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1282242) at new c (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1282116) at e.initComponent (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1085487) at e.initTreeView (https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1279920) at https://0.0.0.0/_framework/blazor.webview.js:1:3337 at new Promise (<anonymous>) at beginInvokeJSFromDotNet (https://0.0.0.0/_framework/blazor.webview.js:1:3311) at https://0.0.0.0/_framework/blazor.webview.js:1:42795 at EventTarget.<anonymous> (<anonymous>:7:62) at EmbeddedBrowserWebView.<anonymous> (<anonymous>:1:40673)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikTreeView.InitTreeView()
at Telerik.Blazor.Components.TelerikTreeView.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

TreeView

updated answer on 15 Nov 2024

1 answer

76 views

Drag and Drop in Treeview

Hi, I am trying to implement Drag and Drop on the Blazor Treeview component. I am using version 4.4.0 and have been referencing this documentation: https://docs.telerik.com/blazor-ui/components/treeview/drag-drop#ondragstart-event

So far

The event "OnDragStart" does not exist,The class "TreeViewDragStartEventArgs" does not exist.

Your documentation never seems to list when functionality is available so I have no idea if it is the version I am using, something I have done, or your components.
Would love some help clearing this up.

TreeView

answered on 30 Sep 2024

1 answer

69 views

TreeView with checkboxes: Initial value for parent nodes

Hi,

I have a TreeView where the initial values are set programmatically.

When all the child nodes are checked the parent node should be checked as well. But it isn't:
https://blazorrepl.telerik.com/GIOLlWks03IKIiiZ31

Is there any solution for that?

Best regards,

Rayko

TreeView

answered on 19 Jul 2024

1 answer

71 views

Treeview with checkboxes, problems with CheckParents=@true CheckChildren=@true

We are updating the data bound to the treeview dynamically which has CheckParents and CheckChildren set to true . Issue is it appears the binding is ignoring these flags. screenshot show it ignoring CheckParents. This REPL shows it ignoring CheckChildren https://blazorrepl.telerik.com/GyuKmVPY13f8gREi18

TreeView

answered on 01 Jul 2024

1 answer

69 views

Treeview: Focused Node

The node of a treeview loses its focus and emphasis if another control element receives the focus. How can I keep the selected entry permanently?

TreeView

answered on 01 Jul 2024

2 answers

122 views

How I Change the expended collapse icon from TelerikTreeView

HI:

How Can I change the expanded i/collapsed con from TelerikTreeView?

There is a demo in the documentation but is for the main icon, not for the collapse/expanded icon.

Thanks in advance.

TreeView

answered on 26 Jun 2024

1 answer

107 views

TelerikTreeView prevent selection from changing

I am using a TelerikTreeView in my component. When I click on a node (an expanded child node), I check whether the form for the currently selected node is dirty. If the form is dirty, I show a prompt asking the user to continue or not. When the user selects no/cancel, the clicked node should not be selected.

I am using the event below.

protected async Task OnItemClickedAsync(TreeViewItemClickEventArgs args)

I can't find a way to cancel this event or to prevent the newly clicked item to be selected. Is there any way to prevent a clicked item to be selected? I have been experimenting with @bind-SelectedItems to no avail. I haven't been able to find a solution for this problem.

Any help is appreciated.

TreeView

answered on 21 Jun 2024