Using the TelerikTreeView component inside the TelerikWindow component

[Andrey]

Hi all,

When TelerikTreeView is used within TelerikWindow's WindowContent, mouse hover events trigger continuous re-rendering of the entire window content, resulting in significant performance degradation. However, using TelerikTreeView directly on a page outside the window doesn't cause these re-rendering issues.

<TelerikWindow Visible=true>
    <WindowContent>
            <TelerikTreeView Data="@TreeData">
                <TreeViewBindings>
                    <TreeViewBinding>
                        <ItemTemplate>
                            @{
                                TreeItem itm = context as TreeItem;
                                <span @onclick="@( _ => NodeClick(itm) )">
                                    Node:
                                    <strong>@itm.Text</strong>
                                </span>
                            }
                        </ItemTemplate>
                    </TreeViewBinding>
                </TreeViewBindings>
            </TelerikTreeView>
    </WindowContent>
</TelerikWindow>

@code {
    string result { get; set; }
    async Task NodeClick(TreeItem clickeNode)
    {
        result = $"Last clicked node Id: {clickeNode.Id}";
    }

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

[Ivan Danchev]

Andrey,

I checked how the TreeView behaves when used inside the Window and I did not observe the content re-render occurring. See the attached short video showing the example you posted ran in the REPL sandbox: https://blazorrepl.telerik.com/wJlblXPF5549SbxR30 

The TreeView is inspected in the browser's dev tools and shows that its DOM does not get re-rendered. Note that HTML elements from the TreeView structure do not get removed and re-created when hovering the nodes and the TreeView's wrapping element maintains its original data-id attribute value.

Could you modify the linked example so that it demonstrates the problem?