{"id":13807839,"url":"https://github.com/excubo-ag/Blazor.TreeViews","last_synced_at":"2025-05-14T00:32:10.214Z","repository":{"id":46136000,"uuid":"287294030","full_name":"excubo-ag/Blazor.TreeViews","owner":"excubo-ag","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-17T14:17:02.000Z","size":29737,"stargazers_count":72,"open_issues_count":3,"forks_count":19,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-18T04:56:27.471Z","etag":null,"topics":["blazor","treeview"],"latest_commit_sha":null,"homepage":"https://excubo-ag.github.io/Blazor.TreeViews/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/excubo-ag.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-08-13T13:54:59.000Z","updated_at":"2025-04-17T14:15:41.000Z","dependencies_parsed_at":"2023-02-18T10:17:04.126Z","dependency_job_id":"a4b728f3-70fc-48f0-88d5-a4317a4fe0c5","html_url":"https://github.com/excubo-ag/Blazor.TreeViews","commit_stats":{"total_commits":240,"total_committers":7,"mean_commits":"34.285714285714285","dds":"0.48750000000000004","last_synced_commit":"300c33e0eafc2c45089514087310d25e4ac80181"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.TreeViews","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.TreeViews/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.TreeViews/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.TreeViews/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/excubo-ag","download_url":"https://codeload.github.com/excubo-ag/Blazor.TreeViews/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046416,"owners_count":22005591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","treeview"],"created_at":"2024-08-04T01:01:31.057Z","updated_at":"2025-05-14T00:32:05.204Z","avatar_url":"https://github.com/excubo-ag.png","language":"HTML","funding_links":[],"categories":["Libraries \u0026 Extensions","Recently Updated"],"sub_categories":["2D/3D Rendering engines","[Mar 01, 2025](/content/2025/03/01/README.md)"],"readme":"## Excubo.Blazor.TreeViews\r\n\r\n[![Nuget](https://img.shields.io/nuget/v/Excubo.Blazor.TreeViews)](https://www.nuget.org/packages/Excubo.Blazor.TreeViews/)\r\n[![Nuget](https://img.shields.io/nuget/dt/Excubo.Blazor.TreeViews)](https://www.nuget.org/packages/Excubo.Blazor.TreeViews/)\r\n[![GitHub](https://img.shields.io/github/license/excubo-ag/Blazor.TreeViews)](https://github.com/excubo-ag/Blazor.TreeViews/)\r\n\r\nExcubo.Blazor.TreeViews is a native-Blazor tree-view component.\r\n\r\n[Demo on github.io using Blazor Webassembly](https://excubo-ag.github.io/Blazor.TreeViews/)\r\n\r\n## How to use\r\n\r\n### 1. Install the nuget package Excubo.Blazor.TreeViews\r\n\r\nExcubo.Blazor.TreeViews is distributed [via nuget.org](https://www.nuget.org/packages/Excubo.Blazor.TreeViews/).\r\n[![Nuget](https://img.shields.io/nuget/v/Excubo.Blazor.TreeViews)](https://www.nuget.org/packages/Excubo.Blazor.TreeViews/)\r\n\r\n#### Package Manager:\r\n```ps\r\nInstall-Package Excubo.Blazor.TreeViews\r\n```\r\n\r\n#### .NET Cli:\r\n```cmd\r\ndotnet add package Excubo.Blazor.TreeViews\r\n```\r\n\r\n#### Package Reference\r\n```xml\r\n\u003cPackageReference Include=\"Excubo.Blazor.TreeViews\" /\u003e\r\n```\r\n\r\n### 2. Add the `TreeView` component to your app\r\n\r\n```html\r\n@using Excubo.Blazor.TreeViews\r\n\r\n\u003cTreeView Items=\"Items\" /\u003e\r\n```\r\n\r\nHave a look at the fully working examples provided in [the sample project](https://github.com/excubo-ag/Blazor.TreeViews/tree/main/TestProject_Components).\r\n\r\n## Design principles\r\n\r\n- Blazor API\r\n\r\nThe API should feel like you're using Blazor, not a javascript library.\r\n\r\n- Minimal js, minimal css, lazy-loaded only when you use the component\r\n\r\nThe non-C# part of the code of the library should be as tiny as possible. We set ourselves a maximum amount of 10kB for combined js+css.\r\nThe current payload is 0kB.\r\n\r\n## Breaking changes\r\n\r\n### Version 4.X.Y\r\n\r\nStarting with version 4.0.0, programmatic changes of selected items was improved.\r\nPreviously, one had to add `@key=version` to the TreeView and increment the version after each update.\r\nHowever, this was the cause for a bug.\r\nThe new design requires the user to take an element reference to the TreeView (`@ref=tree_view`) and call `tree_view.RefreshSelection()` after selection has been modified.\r\nSee TestProject_Components/Pages/Selection.razor for an example.\r\n\r\n\r\n### Version 3.X.Y\r\n\r\nStarting with version 3.0.0, only the net6.0 TFM is targeted. This is a change to simplify dependency management and we strongly encourage all users to upgrade to net6.0.\r\n\r\n### Version 2.X.Y\r\n\r\nIn this version, [@qinhuaihe](https://github.com/qinhuaihe) added support for `Disabled`, both on individual elements, and the entire tree view. This required a few changes to the API, including how custom checkbox styles are handled.\r\nPlease refer to the section below to learn how to implement a custom checkbox style.\r\n\r\n## Checkbox style from another component library\r\n\r\nIt is possible to configure the checkbox style for a `TreeView` with `AllowSelection` enabled. Use the `CheckboxTemplate` parameter:\r\n\r\n```\r\n\u003cTreeView Items=\"Items\" AllowSelection=\"true\" CheckboxTemplate=\"checkbox_template\" /\u003e\r\n```\r\n\r\nBecause of a [quirk in Blazor](https://github.com/dotnet/aspnetcore/issues/24655), writing the correct code for the `CheckboxTemplate` can be quite tricky.\r\nSee below for a list of snippets of correct checkboxes in some of the common component libraries.\r\nIf you can't find your favorite library, please consider contributing to this list.\r\n\r\n### [MatBlazor](https://github.com/SamProf/MatBlazor)\r\n\r\n```cs\r\n@code {\r\n    private static readonly object no_render = new object();\r\n    private static readonly CheckboxFragment checkbox_template_matblazor =\r\n        (value, indeterminate, value_changed, disabled) =\u003e\r\n            (builder) =\u003e\r\n            {\r\n                builder.OpenComponent\u003cMatBlazor.MatCheckbox\u003cbool?\u003e\u003e(0);\r\n                builder.AddAttribute(1, nameof(MatBlazor.MatCheckbox\u003cbool?\u003e.Value), indeterminate ? null : value);\r\n                builder.AddAttribute(2, nameof(MatBlazor.MatCheckbox\u003cbool?\u003e.ValueChanged), EventCallback.Factory.Create\u003cbool?\u003e(no_render, (v) =\u003e { if (v != null) { value_changed(v.Value); } }));\r\n                builder.AddAttribute(3, nameof(MatBlazor.MatCheckbox\u003cbool?\u003e.Indeterminate), true);\r\n                builder.AddAttribute(4, nameof(MatBlazor.MatCheckbox\u003cbool?\u003e.Disabled), disabled);\r\n                builder.AddEventStopPropagationAttribute(5, \"onclick\", true);\r\n                builder.CloseComponent();\r\n            };\r\n}\r\n```\r\n\r\n### [Material.Blazor](https://github.com/Material-Blazor/Material.Blazor)\r\n\r\n```cs\r\n@code {\r\n    private static readonly object no_render = new object();\r\n    private static readonly CheckboxFragment checkbox_template_material_blazor =\r\n        (value, indeterminate, value_changed, disabled) =\u003e\r\n            (builder) =\u003e\r\n            {\r\n                builder.OpenComponent\u003cMaterial.Blazor.MBCheckbox\u003e(0);\r\n                builder.AddAttribute(1, nameof(Material.Blazor.MBCheckbox.Value), value);\r\n                builder.AddAttribute(2, nameof(Material.Blazor.MBCheckbox.ValueChanged), EventCallback.Factory.Create\u003cbool\u003e(no_render, value_changed));\r\n                builder.AddAttribute(3, nameof(Material.Blazor.MBCheckbox.IsIndeterminate), indeterminate);\r\n                builder.AddAttribute(4, nameof(Material.Blazor.MBCheckbox.Disabled), disabled);\r\n                builder.AddEventStopPropagationAttribute(5, \"onclick\", true);\r\n                builder.CloseComponent();\r\n            };\r\n}\r\n```\r\n\r\n\r\n### [Radzen.Blazor](https://github.com/radzenhq/radzen-blazor)\r\n\r\n```cs\r\n@code {\r\n    private static readonly object no_render = new object();\r\n    private static readonly CheckboxFragment checkbox_template_radzen =\r\n        (value, indeterminate, value_changed, disabled) =\u003e\r\n            (builder) =\u003e\r\n            {\r\n                builder.OpenComponent\u003cRadzen.Blazor.RadzenCheckBox\u003cbool?\u003e\u003e(0);\r\n                builder.AddAttribute(1, nameof(Radzen.Blazor.RadzenCheckBox\u003cbool?\u003e.Value), indeterminate ? null : value);\r\n                builder.AddAttribute(2, nameof(Radzen.Blazor.RadzenCheckBox\u003cbool?\u003e.ValueChanged), EventCallback.Factory.Create\u003cbool?\u003e(no_render, (v) =\u003e { if (v != null) { value_changed(v.Value); } }));\r\n                builder.AddAttribute(3, nameof(Radzen.Blazor.RadzenCheckBox\u003cbool?\u003e.TriState), false);\r\n                builder.AddAttribute(4, nameof(Radzen.Blazor.RadzenCheckBox\u003cbool?\u003e.Disabled), disabled);\r\n                builder.AddEventStopPropagationAttribute(5, \"onclick\", true);\r\n                builder.CloseComponent();\r\n            };\r\n}\r\n```\r\n### Samples and Tutorials\r\n\r\nThe official usage examples can be found on https://excubo-ag.github.io/Blazor.TreeViews/.\r\n\r\nAll following links provided here are not **affiliated with excubo ag** and have been **contributed by the community**.\r\n\r\n- [Blazor Tree Creator with Checkboxes](https://blazorhelpwebsite.com/ViewBlogPost/51) by [@ADefWebserver](https://github.com/ADefWebserver/)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexcubo-ag%2FBlazor.TreeViews","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexcubo-ag%2FBlazor.TreeViews","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexcubo-ag%2FBlazor.TreeViews/lists"}