This is a migrated thread and some comments may be shown as answers.

TreeView roadmap?

5 Answers 110 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alberto
Top achievements
Rank 1
Alberto asked on 14 Jun 2019, 10:00 PM

when can we expect to have a TreeView component like this https://www.syncfusion.com/blazor-components/blazor-treeview

Looks like syncfusion already have treeview and much more components for blazor.

 

5 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 16 Jun 2019, 04:39 AM
Hello Alberto,

The treeview is in our immediate roadmap. In fact, we are already working on it and we will ship it as soon as possible.

At the moment, the first concern is compatibility with Preview 6 which brought a lot of breaking changes, however, and I am not sure if the treeview will make in the release that we will ship for compatibility with the framework (hopefully, by the end of the coming week). Even if it doesn't make it into this one, we are committed to a rather aggressive release schedule (perhaps as often as once a month), and the treeview will be available soon.

So, I encourage you to follow our releases to get the latest components and fixes: https://www.telerik.com/support/whats-new/blazor-ui/release-history. You can also do this with a dedicated RSS feed: https://www.telerik.com/feeds/ui-for-blazor-whats-new.

On Syncfusion - they are wrapping jQuery widgets through JS Interop and this is what enables them to provide a lot of components. The downside of this approach is that those components are not native Blazor components and don't really leverage the Blazor framework. We could have done the same with our Kendo UI widgets, but we chose to create everything from the ground up as native Blazor components as we believe this will benefit everyone in the long run, even if it will cause components to take longer to appear in the suite. You can read more on the differences between native components and wrappers in the following post: https://www.telerik.com/blogs/comparing-native-blazor-components-to-wrapped-javascript-components.

If you have any outstanding questions, just let me know.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
0
Andriy
Top achievements
Rank 1
answered on 15 Jul 2019, 12:48 PM
Hello Marin
How to change vertical space between TreeView nodes? Inside node template I can change anything, but I can't change height of hover style.
For example, when i hover cursor on the node, I see more big size rectangle and I want to change this size. Please, look at my screenshot.
And please add ThreeView theme in your forum.
0
Andriy
Top achievements
Rank 1
answered on 15 Jul 2019, 01:52 PM
I found where it was. Early in index.html I change theme from
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
to
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" />
And bootstrap very like big indents.
0
Marin Bratanov
Telerik team
answered on 15 Jul 2019, 02:17 PM
Hi Andriy,

I have created a TreeView sub forum: https://www.telerik.com/forums/blazor/treeview.

On altering the built-in appearance of the treeview - in case the various built-in themes (https://docs.telerik.com/blazor-ui/themes) are not enough, you can also inspect the rendered HTML with the browser dev toolbar and devise CSS rules of your own that will provide the desired changes.
For example, the screenshot attached below where the spacing is increased and the hover effect extends more on the sides of the text is achieved with the following code:

<style>
    .k-item.k-treeview-item .k-in {
        padding: 20px; /* of course, you can tweak the values here as needed by your design, I use 20px all around for brevity */
    }
</style>
 
@using Telerik.Blazor.Components.TreeView
 
<TelerikTreeView Data="@FlatData">
</TelerikTreeView>
 
@code {
    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
        public bool Expanded { get; set; }
    }
 
    public IEnumerable<TreeItem> FlatData { get; set; }
 
    protected override void OnInit()
    {
        LoadFlatData();
    }
 
    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();
 
        for (int i = 1; i <= 4; i++)
        {
            items.Add(new TreeItem()
            {
                Id = i,
                Text = "Category " + i,
                ParentId = null,
                HasChildren = i < 3,
                Expanded = true
            });
        }
 
        for (int i = 5; i < 15; i++)
        {
            items.Add(new TreeItem()
            {
                Id = i,
                Text = "Product " + i,
                ParentId = i < 10 ? 1 : 2
            });
        }
 
        FlatData = items;
    }
}


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
0
Andriy
Top achievements
Rank 1
answered on 15 Jul 2019, 05:24 PM
Marin, thank you very much for your advising. Yes, it's works.
Tags
General Discussions
Asked by
Alberto
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Andriy
Top achievements
Rank 1
Share this question
or