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?

[Andrey]

Ivan,

Thank you very much for your feedback. Your example actually prompted me to dig deeper and analyze my own code more thoroughly. This issue might be specific to my particular environment, and I could be mistaken, but the only detail that helped me resolve and identify the problem was related to using two specific links simultaneously in my index.html file:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/kendo-theme-bootstrap/all.css" rel="stylesheet" />

I discovered that when I replaced <link href="css/kendo-theme-bootstrap/all.css" rel="stylesheet" /> with alternative theme files like:

• kendo-theme-default/all.css

• kendo-theme-material/all.css

• kendo-theme-fluent/all.css

The performance issue and continuous re-rendering disappeared completely.

[Andrey]

I'm closing this question as the issue is local to my project, caused by a dependency conflict and version mismatch. My apologies for the error.