Questions on UI for Blazor Forum

1 answer

6 views

TreeView indent

Is it possible to increase the indent on child folder items?

TreeView

answered on 11 Apr 2024

0 answers

28 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

asked on 16 Feb 2024

1 answer

45 views

Get Treeview node number

I need to get the node number of the tree view. I know there is a TreeItem that has the Level property but I can't figure out how to get it. I tried using an Item Template and that is where I am stuck. I couldn't figure out how to get the item info.

Here is my current tree view which works fine but I can't get the level.

<div>This is the tree view <br />
<TelerikTreeView
    Data="TreeViewList">
    <TreeViewBindings>
        <TreeViewBinding 
            ParentIdField="ParentId"
            IdField="Id"
            HasChildrenField="HasChildren"
            TextField="Name">
        </TreeViewBinding>
    </TreeViewBindings>
</TelerikTreeView>
</div>

TreeView

updated answer on 11 Dec 2023

1 answer

55 views

Treeview/Treelist lazy loading and paging

I am using treelist to display an hierarchical dataset that is read from an API using web calls.

I have encounbtered a problem where my source data contained many root items (which was an actual programming error), but by this surfaced a problem that you have to read ALL roots (or all children of an item) in order to make paging work correctly.

As in some cases I may have up to 10K "child" items (whichs unfortunately landed in my root due to the error), I would expect treeview and treelist to handle this without actually having to transfer 10K objects from my API call.

For this, a similar solution like the one used for the grid "OnRead" event would be a good solution as this could tell the treeview how many (root or direct child) objects there actually are and provide the offset to start reading with and how many objects to return.

You could even throw in filtering and sorting for all I care and recycle the DataRequest class for this.

This in turn should help getting the "paging" right for the treelist/treeview.

Regards - Hans

Grid

TreeList

TreeView

answered on 27 Nov 2023

1 answer

54 views

How can I react to @onkeydown in a TreeView ItemTemplate?

As the title says, I am trying to use the @onkeydown Event in a TreeView ItemTamplate.
The reason for doing this is so I can manipulate the default navigation behaviour of the TreeView and immediately select an item when using the Up and Down Arrows instead of having to press the Enter key.

I am aware of the documentation that shows how to react to @onclick Blazor Treeview - Templates - Telerik UI for Blazor.
I can get @onclick to work but not @onkeydown or any other input related events besides mouse events.
Using Telerik 3.6.0

Below is a code sample which shows what I am trying to do but is not working.
When debugging and setting a breakpoint in the NodeKeyDown Method, I can not reach it.

<TelerikTreeView Data=“@TreeData”><TreeViewBindings><TreeViewBinding><ItemTemplate> @{ TreeItem itm = context as TreeItem; 

<span @onkeydown=“@(_ => NodeKeyDown(_))” tabindex=“0”> Node: <strong>@itm.Text</strong></span> 
}
 </ItemTemplate>
</TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
<label id=“result”>@result</label>

@code { string result { get; set; }

async Task NodeKeyDown(KeyboardEventArgs args)
{
    result = $"You pressed key: {args.Code}";
}

// sample data
public IEnumerable<TreeItem> TreeData { get; set; }

public class TreeItem
{
    public string Text { get; set; }
    public int Id { get; set; }
    public List<TreeItem> Items { get; set; } = new List<TreeItem>();
    public bool HasChildren { get; set; }
}

protected override void OnInitialized()
{
    LoadHierarchical();
}

private void LoadHierarchical()
{
    List<TreeItem> roots = new List<TreeItem>()
    {
        new TreeItem { Text = "Item 1", Id = 1, HasChildren = true },
        new TreeItem { Text = "Item 2", Id = 2, HasChildren = true }
    };

    roots[0].Items.Add(new TreeItem { Text = "Item 1 first child", Id = 3 });
    roots[0].Items.Add(new TreeItem { Text = "Item 1 second child", Id = 4 });
    roots[1].Items.Add(new TreeItem { Text = "Item 2 first child", Id = 5 });
    roots[1].Items.Add(new TreeItem { Text = "Item 2 second child", Id = 6 });

    TreeData = roots;
}

TreeView

answered on 30 Oct 2023

0 answers

88 views

DropDownTree Component

Hi @all,

I am currently trying to create a TreeDropDownComponent.

so far it works, but I have the problem that it doesn't make sense inside a grid.
I am currently trying to create a TreeDropDownComponent.

so far it works, but I have the problem that it doesn't make sense inside a grid.

Because this component inside the grid cell
and so the popupElement is not above the grid. Does anyone have an idea how I can fix this?

here is my css and code:

@using Telerik.Blazor
@using Telerik.Blazor.Components

<div id="treeSelectorComponent">
    <span class="telerik-blazor k-dropdownlist k-valid k-picker k-picker-solid k-picker-md k-rounded-md"
          onclick="@ToggleDropdown">
        <span class="k-input-inner @( DropDownShown ? "k-state-focused" : "" )">
            <span class="k-input-value-text">@GetSelectedItemsText()</span>
        </span>
        <button class="telerik-blazor k-button k-input-button k-button-solid k-button-md k-button-solid-base k-icon-button"
                type="button">
            <span class="telerik-blazor k-button-icon k-icon k-i-caret-alt-down"></span>
        </button>
    </span>
    <TelerikAnimationContainer @ref="dropdown" Class="k-popup treeView-scrollable-element" >
        <TelerikTreeView Data="TreeItems"
                         SelectionMode="TreeViewSelectionMode.Single"
                         OnItemClick="OnTreeItemClicked">
            <TreeViewBindings>
                <TreeViewBinding ParentIdField="ParentId"
                                 TextField="Text"
                                 IdField="Id">
                    <ItemTemplate>
                        @{
                            TreeItemSelector item = context as TreeItemSelector;
                            <span>@item!.Text</span>
                        }
                    </ItemTemplate>
                </TreeViewBinding>
            </TreeViewBindings>
        </TelerikTreeView>
    </TelerikAnimationContainer>
</div>

@code {
    private bool DropDownShown { get; set; }
    private TelerikAnimationContainer dropdown;

    [Parameter, EditorRequired]
    public List<TreeItemSelector> TreeItems { get; set; } = new List<TreeItemSelector>();
    [Parameter]
    public int TreeId { get; set; } = default!;
    [Parameter]
    public EventCallback<int> TreeIdChanged { get; set; }

    async Task ToggleDropdown()
    {
        DropDownShown = !DropDownShown;
        await dropdown.ToggleAsync();
    }
    string GetSelectedItemsText()
    {
        return TreeItems.FirstOrDefault(p => p.Id == TreeId)?.Text!;
    }

    private async Task OnTreeItemClicked(TreeViewItemClickEventArgs arg)
    {
        var item = arg.Item as TreeItemSelector;
        TreeId = item!.Id;
        if(TreeIdChanged.HasDelegate)
            await TreeIdChanged.InvokeAsync(TreeId);

        await ToggleDropdown();
    }

  public class TreeItemSelector 
  {
      public int Id { get; set; }
      public string Text { get; set; }
      public int? ParentId { get; set; }
      public bool HasChildren { get; set; }
  }
}

#treeSelectorComponent {
    .k-popup {
        &.treeView-scrollable-element{
            overflow-y: auto;
            max-height: 300px;
        }
    }
}

AnimationContainer

DropDownList

TreeView

asked on 20 Sep 2023

1 answer

34 views

DragClueField for TreeView

HI,

the DragClueField when using Drag&Drop only exists for the Grid right now. Why is this attribute not setable for the TreeView also?

TreeView

answered on 03 Aug 2023

2 answers

107 views

Set selected items in Treeview asynchronously

Hi,

I'd like to set the selected items of a treeview from an async method. The values to set come from an web api. So it's an async call.

I tested the case with the provided Telerik sample. With version 2.25 it works. With the latest version selected items are not set within the treeview.

What do I miss?

@page "/"
<TelerikTreeView Data="@FlatData"
                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
                 CheckParents="@true"
                 CheckChildren="@true"
                 CheckOnClick="@false"
                 @bind-CheckedItems="@SelectedItems">
    
</TelerikTreeView>

@code {
    List<TreeItem> FlatData { get; set; }
    IEnumerable<object> SelectedItems { get; set; } = new List<object>();
    protected override async Task OnInitializedAsync()
    {
        await GenerateData();
        await SelectDefault();
    }

    async Task SelectDefault()
    {
        await Task.Delay(100);
        SelectedItems = FlatData.Where(data => data.Id == 2);
    }

    async Task GenerateData()
    {
        FlatData = new List<TreeItem>();

        FlatData.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentId = null,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        FlatData.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentId = 1,
            HasChildren = true,
            Icon = "brush",
            Expanded = true
        });
        FlatData.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentId = 1,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });
    }

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
    }
}

TreeView

answered on 26 May 2023

1 answer

142 views

TreeView parenting, children and checked items

Hello,

both in the docs and demos, the text says (emphasis mine) "the ParentId field which points to the Id of the item that will contain the current item", yet the model shows the field as "public int? Parent { get; set; }" without the Id at the end? Seems like one or the other is wrong? Also I don't see any mention if the Id fields have to be specifically int, or if they could be string for.ex.?

Edit.: It actually seems that you can set the name of the ParentId Property, and that is done in the examples I linked. Still a bit confusing for people like me who don't read the whole thing.

Secondly, would be nice if I didn't have to "pollute" my models with the "HasChildren" property. The TreeView is obviously looking at some things in the data (for.ex. it's looking for the one item with null as Parent and if the HasChildren is true, it's looking for them) so would be great if it would look through the data and see if there are children for a given item automatically. Now it feels I have to tell it twice, first with the Id/ParentID properties and secondly with HasChildren.

Thirdly, currently the TreeView exposes the items that have been checked as the bindable CheckedItems collection. For this I think it would be easier if we could configure something like "my model has the boolean property ThisItemIsCheckedNow, use that as the checked indicator" and then, when checking items, that given property on the model would be true or false as the UI checkbox is checked/unchecked.

TreeView