Questions on UI for Blazor Forum

1 answer

18 views

Customize the expander in TelerikTreeView using TelerikToggleButton

How can I replace the default carat expander of the TelerikTreeView with a customized expander using a TelerikToggleButton? I'd like to toggle between two ISvgIcons as my expand and collapse.

What I'm trying to accomplish is very similar to what's being done in this example with RadTreeView and ToggleButton https://docs.telerik.com/devtools/wpf/controls/radtreeview/styles-and-templates/styling-and-appearance-styling-expander.

ToggleButton

TreeView

answered on 07 May 2024

1 answer

22 views

Losing Check State on rebind?

I have the following page:

@page "/test"
@using System.Collections.ObjectModel

<TelerikToolBar Class="toolbar-size" Adaptive="false">    
    <ToolBarButton Icon="@SvgIcon.FileAdd" OnClick="@OnAdd">Add</ToolBarButton>
</TelerikToolBar>

<TelerikSplitter Height="500px">
    <SplitterPanes>
        <SplitterPane Size="20%" Collapsible="true">
            <TelerikTreeView Data="@Items" @bind-CheckedItems="@CheckedItems"                             
                             CheckBoxMode="TreeViewCheckBoxMode.Multiple">
                <TreeViewBindings>
                    <TreeViewBinding ParentIdField="ParentIdValue"></TreeViewBinding>
                </TreeViewBindings>
            </TelerikTreeView>
        </SplitterPane>
        <SplitterPane Collapsible="true">
        </SplitterPane>
    </SplitterPanes>
</TelerikSplitter>

@code {

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

    public ObservableCollection<TreeItem> Items { get; set; } = new ObservableCollection<TreeItem>();
    public IEnumerable<object> CheckedItems { get; set; } = new List<object>();

    private int counter;

    private void OnAdd()
    {
        this.Items.Add(new TreeItem { Id = counter, Text = $"test {counter}" });
        counter++;
    }
}

If I add some items with the add button, then check some items, and then add some more items, the check state seems to be lost.

However, if I collapse and expand the split panel, the items get checked again.

Is this a bug, or what am I doing wrong?

TreeView

answered on 24 Apr 2024

1 answer

14 views

TreeView indent

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

TreeView

answered on 11 Apr 2024

0 answers

44 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

50 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

67 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

66 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

117 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

37 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

123 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; }
    }
}