mwinkler / blazor.components Goto Github PK
View Code? Open in Web Editor NEWUI components for ASP.NET Blazor (Tree, Selector)
License: MIT License
UI components for ASP.NET Blazor (Tree, Selector)
License: MIT License
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:
User enters Item 7 and presses either "Enter" or "," then this should be added to the list and be selected.
Regards
Daniel
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:
`
<!-- Extension - Treeview -->
<link rel="stylesheet" href="_content/MW.Blazor.Tree/styles.css" />
<script src="_framework/blazor.webassembly.js"></script>
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?
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?
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.
.curosr-pointer
should be .cursor-pointer
?
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.
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) { }
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" />
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.