Telerik Forums
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.

<TelerikDropDownList Data="@FlatData" @bind-Value="SelectedItemText" >
    <ItemTemplate>
        <TelerikTreeView Data="FlatData" SelectedItems="@SelectedItems" @bind-ExpandedItems="@ExpandedItems" />
    </ItemTemplate>
</TelerikDropDownList> 

Hristian Stefanov
Telerik team
 answered on 24 Feb 2025
0 answers
42 views

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?

Joseph
Top achievements
Rank 1
 asked on 29 Jan 2025
1 answer
67 views

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>
Dimo
Telerik team
 answered on 02 Jan 2025
1 answer
254 views
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)

Alexey
Top achievements
Rank 1
Iron
 updated answer on 15 Nov 2024
1 answer
76 views

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.


Tsvetomir
Telerik team
 answered on 30 Sep 2024
1 answer
69 views

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

Dimo
Telerik team
 answered on 19 Jul 2024
1 answer
71 views

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

                  <TelerikTreeView Data="@PermissionTreeData"
                                   @bind-CheckedItems="@CheckedItems"
                                   CheckBoxMode=@TreeViewCheckBoxMode.Multiple
                                   CheckParents=@true
                                   CheckChildren=@true>

Stamo Gochev
Telerik team
 answered on 01 Jul 2024
1 answer
69 views
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?
Hendrik
Top achievements
Rank 2
Bronze
Iron
Iron
 answered on 01 Jul 2024
2 answers
122 views

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.

Nadezhda Tacheva
Telerik team
 answered on 26 Jun 2024
1 answer
107 views

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.

Radko
Telerik team
 answered on 21 Jun 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?