TreeView component extension #987
Conversation
|
To compile sccs files you need to have Web Compiler for VS installed: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler Also, based on the code you already have I think it's best to create new project for TreeView extension instead of having it in the core Blazorise project. |
| [Parameter] public IList<TNode> ExpandedNodes { get; set; } = new List<TNode>(); | ||
| [Parameter] public EventCallback<IList<TNode>> ExpandedNodesChanged { get; set; } | ||
|
|
||
| [Parameter] public string ExpandNodeIconClass { get; set; } = "far fa-plus-square cursor-pointer"; |
There was a problem hiding this comment.
Should use native Blazorise <Icon> instead of working directly with font awesome names.
|
|
||
| [Parameter] public string ExpandNodeIconClass { get; set; } = "far fa-plus-square cursor-pointer"; | ||
| [Parameter] public string CollapseNodeIconClass { get; set; } = "far fa-minus-square cursor-pointer"; | ||
| [Parameter] public string NodeTitleClass { get; set; } = "p-1 cursor-pointer"; |
There was a problem hiding this comment.
Use Blazorise Padding utility
| [Parameter] public string ExpandNodeIconClass { get; set; } = "far fa-plus-square cursor-pointer"; | ||
| [Parameter] public string CollapseNodeIconClass { get; set; } = "far fa-minus-square cursor-pointer"; | ||
| [Parameter] public string NodeTitleClass { get; set; } = "p-1 cursor-pointer"; | ||
| [Parameter] public string NodeTitleSelectedClass { get; set; } = "bg-primary text-white"; |
There was a problem hiding this comment.
Probably make use of Blazorise BackgroundColor and TextColor in IClassProvider
| <PackageIcon>Blazorise.png</PackageIcon> | ||
| <PackageProjectUrl>https://blazorise.com/</PackageProjectUrl> | ||
| <RepositoryUrl>https://github.com/stsrki/Blazorise</RepositoryUrl> | ||
| <PackageTags>blazorise blazor components treeview</PackageTags> |
There was a problem hiding this comment.
Add yourself as author
<Authors>%Authors%;Your Name</Authors>
|
|
||
| <div class="tree-view-title"> | ||
| <span class="@NodeTitleClass @(nodeSelected ? NodeTitleSelectedClass : String.Empty)" @onclick="@(() => OnSelectNode(node))"> | ||
| @TextContent( node ) |
There was a problem hiding this comment.
Maybe better name is NodeTemplate or NodeContent?
| SelectedNode="SelectedNode" | ||
| SelectedNodeChanged="SelectedNodeChanged" | ||
| Visible="nodeExpanded" | ||
| HasChildNodes="HasChildNodes" /> |
There was a problem hiding this comment.
Can HasChildNodes be detected from data without specifying it explicitly?
There was a problem hiding this comment.
Unfortunately not (at least I could not separate them), The TreeView is (probably) unique in that it is recursively created within itself, and the data class that is provided (TNode) can be anything, the only way I know of passing the child nodes, visibility and whether the child nodes themselves contain child nodes is by referencing them in the component. Really the users would probably never set the visibility of a treeview themselves, but I still need a Visibility parameter hooked up to nodeExpanded (so the child treeviews display when the node is expanded).
There was a problem hiding this comment.
Maybe one way is to have internal component named _TreeView that will have those parameters and have TreeView as a public component that is a wrapper around _TreeView.
Similar concept I have for DataGrid. Also that way we can have CascadingParameter(s) like SelectedNode.
|
I've made as many changes as I can but I am still a bit lost in understanding how the FluentSpacing and Background.Primary classes work - are these something that need building for each provider? |
Sometimes it's hard for me to realize not everyone understand what's going on behind the scenes in Blazorise. I should have probably explain it better :) Anyways I have made some changes so you can now see from example. It's still not ideal because I wanted to use class builder for node but |
|
I have made some refactoring, cleaned API and updated the documentation. It should now be ready for merge. When you got time please check one more time on your end if everything works. tnx |
|
Thanks for cleaning up - it is much better now! To be honest I think I probably got out of my depth with the way it was before, as a treeview contained a treeview which contained a treeview etc. I have checked that it all works, made some final changes to docs and added a test page description. |
|
I can see there can be more work and improvements, specifically add support for validations, but for now I think it is ready for merge. We can always add modifications later. Thank you for all your the time and work you put into this. I really appreciate it! |
I've attempted to merge in my treeview component into Blazorise. Its not complete yet because the css classes that I added to Blazorise.scss and compiled use webcompiler never make it into the _content/blazorise.css class. Can you help me understand why?
I guess I will also need to add into the various IClassProvider implemtations for the different providers for TreeView,TreeViewHidden etc. but I need to get the basic version working first.