mwinkler/blazor.components

UI components for ASP.NET Blazor (Tree, Selector)

blazor.components's Issues

Typo in stylesheet for Tree

.curosr-pointer should be .cursor-pointer ?

SelectedNodeChanged is used two or more times for this component

This is a part of markup I use to set up the Tree:

`<MW.Blazor.Tree Nodes="Items"  SelectedNodeChanged="@((item) => NodeChanged(item))" ChildSelector="@(item => item.Childs)" @bind-SelectedNode="@selectedNode" 
                @bind-ExpandedNodes="ExpandedNodes" HasChildNodes="@(item => item.Childs?.Any() == true)">`

This is the class for TNode:

`public class TreeItem
    {
        public int DepartmentID { get; set; }
        public int CategoryID { get; set; }
        public string Text { get; set; }        
        public List<TreeItem> Childs { get; set; }        
    }
`

The tree is working fine until I needed to add SelectedNodeChanged to it that I get the error:
SelectedNodeChanged is used two or more times for this component
when I hover over the red line under the SelectedNodeChanged attribute.
This is the method I want to hook:

 IEnumerable<TreeItem> Items = new List<TreeItem>();
 TreeItem selectedNode;
 IList<TreeItem> ExpandedNodes = new List<TreeItem>();

public void NodeChanged(TreeItem item)
    {
        
    }

Is this the correct way to attach selectednodechanged to a method? Or the error is from the tree?

HTML not working

Hello,
I am trying to use your Tree but the HTML doesnt seem to be working. after copy pasting your code and running it this is what im getting. there are no expand-collapse buttons

how to subscribe to TreenNode change event?

hi there, could you provide an example of how to subscribe to the SelectedNode change event? i can't figure out how to get this to work.
and thank you, excellent component.
Cheers, Gregor

like this:

@bind-SelectedNode="selectedNode" @bind-SelectedNode:event="selectedNodeChange"

with:

Item selectedNode;
private void selectedNodeChange(Item e)    {    }

Style is not applied for child items

Hi, I found a minor thing. It seems that setting a custom style through the parameter Style only is applied to the root items, not the child items.
It's not set in the conditional check, therefore TreeStyle.Bootstrap is used

            @if (hasChilds)
            {
                <Tree 
                    Nodes="ChildSelector(node)"
                    TitleTemplate="TitleTemplate" 
                    ChildSelector="ChildSelector"
                    ExpandedNodes="ExpandedNodes"
                    ExpandedNodesChanged="ExpandedNodesChanged"
                    SelectedNode="SelectedNode"
                    SelectedNodeChanged="SelectedNodeChanged"
                    Visible="nodeExpanded"
                    HasChildNodes="HasChildNodes" />
            }
            

Adding new items on the fly for TagSelector

Hi,

first of all, I like this component so far. The only thing that I would like to be able is that the user could add new items to the TagSelector component instead of just selecting existing ones.

For example the list contains on load the following items:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

User enters Item 7 and presses either "Enter" or "," then this should be added to the list and be selected.

Regards

Daniel

Operation is not valid due to the current state of the object.

I use your treeview like this:

public class TreeItem
    {
        public int DepartmentID { get; set; }
        public int CategoryID { get; set; }
        public string Text { get; set; }
        public List<TreeItem> Childs { get; set; }        
    }
public List<TreeItem> GetTreeItems()
        {
            var tree = new List<TreeItem>();
            TreeItem item = new TreeItem()
            {
                DepartmentID = 0,
                CategoryID = 0,
                Text = "Root",
                Childs = context.Departments.OrderBy(d => d.Order).Select(d => new TreeItem()
                {
                    DepartmentID = d.Id,
                    CategoryID = 0,
                    Text = d.Title,
                    Childs = d.Categories.OrderBy(c => c.Order).Select(c => new TreeItem()
                    {
                        DepartmentID = d.Id,
                        CategoryID = c.Id,
                        Text = c.Title                         
                    }).ToList()
                }).ToList()
            };
            tree.Add(item);
           
            return tree;
        }

But I get exception when reach the following code:

private void GetTreeModel()
    {
        try
        {
            Items = admin.GetTreeItems();
            TreeSuccess = true;
            TreeMessage = "Success";
            return;
        }
        catch (Exception ex)
        {
            TreeSuccess = false;
            TreeMessage = "Can not load tree items";
            return;
        }
    }

Operation is not valid due to the current state of the object.
I use Blazor server side and GetTreeItems is defined in a singleton service called admin, How do I solve this problem?

TreeView is not becomming RTL

I use localization without a page refresh, so I use css classes like .myClass-en{} and .myClass-rtlLang{} in one css file: site.css for all the languages, With this TreeView I can't set classes for my RTL language, I wish I could.

Fontawesome

Is the tree component dependent on Fontawesome?

I am trying to use the tree component and have copied the demo code exactly, but the icons to expand the nodes are not there.

If the package is dependant on font-awesome, it might be a good idea to add that info to the README to save people time.

Great component btw! Super hard to find one of these for free.

Treeview problem

Hi, firstly, thanks for your job, you are the only one who made a free treeview component :)
I have been searching all around the internet. The only thing missing is the possibility to add an icon left to text of the nodes :) .
I got an issue, I can't see opening button for each nodes...I don't know what to do.
Thanks in advance!
My code:

<Tree Nodes="Items" ChildSelector="@(item => item.Childs)" @bind-SelectedNode="selectedNode" @bind-ExpandedNodes="ExpandedNodes" HasChildNodes="@(item => item.Childs?.Any() == true)"> <TitleTemplate>@context.Text </TitleTemplate> </Tree>

` public class Item
{
public string Text { get; set; }
public IEnumerable Childs { get; set; }
}

  IEnumerable<Item> Items = new[]
{
    new Item { Text = "Item 1" },
    new Item {
        Text = "Item 2",
        Childs = new []
        {
            new Item { Text = "Item 2.1" },
            new Item { Text = "Item 2.2", Childs = new []
                {
                    new Item { Text = "Item 2.2.1" },
                    new Item { Text = "Item 2.2.2" },
                    new Item { Text = "Item 2.2.3" },
                    new Item { Text = "Item 2.2.4" }

                } },
            new Item { Text = "Item 2.3" },
            new Item { Text = "Item 2.4" }

        }},
    new Item { Text = "Item 3" },
    new Item { 
        Text = "Item 4",
        Childs = new []
        {
            new Item { Text = "Item 4.1" },
            new Item { Text = "Item 4.2", Childs = new []
            {
                new Item { Text = "Item 4.2.1" },
                new Item { Text = "Item 4.2.2" },
                new Item { Text = "Item 4.2.3" },
                new Item { Text = "Item 4.2.4" }
            } },
        new Item { Text = "Item 4.3" },
        new Item { Text = "Item 4.4" }

        } },
    new Item { Text = "Item 5" },
    new Item { Text = "Item 6" },
};

IList<Item> ExpandedNodes = new List<Item>();
Item selectedNode;`

index.html:
`

<title>LiveTuningWeb</title>

<!-- Extension - Treeview -->
<link rel="stylesheet" href="_content/MW.Blazor.Tree/styles.css" />

Loading...

<script src="_framework/blazor.webassembly.js"></script>

`