From 532fe03cb1ead8ec2ce95adb0f914b8fcc321865 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Mon, 9 Dec 2024 17:09:02 +0000 Subject: [PATCH 1/6] Added new kb article treeview-change-expand-collapse-icons --- .../treeview-change-expand-collapse-icons.md | 135 ++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 knowledge-base/treeview-change-expand-collapse-icons.md diff --git a/knowledge-base/treeview-change-expand-collapse-icons.md b/knowledge-base/treeview-change-expand-collapse-icons.md new file mode 100644 index 000000000..873758950 --- /dev/null +++ b/knowledge-base/treeview-change-expand-collapse-icons.md @@ -0,0 +1,135 @@ +--- +title: Change the Expand and Collapse Icons in TreeView +description: Learn how to customize the expand and collapse icons in the TreeView component for Blazor. +type: how-to +page_title: How to Customize Expand and Collapse Icons in Blazor TreeView +slug: treeview-kb-change-expand-collapse-icons +tags: treeview, blazor, icons, expand, collapse, customization +res_type: kb +ticketid: 1656109 +--- + +## Environment + + + + + + + + +
ProductTreeView for Blazor
+ +## Description +I want to customize the icons used for expanding and collapsing items in the [TreeView]({%slug treeview-overview%}) for Blazor. + +This knowledge base article answers the following questions: +- How can I use custom icons for the TreeView expand and collapse functionality? +- Is it possible to change the default expand and collapse icons in the TreeView for Blazor? + +## Solution + +You can change the expand/collapse icons in the TreeView by overriding the built-in icons with other icons using [custom CSS rules]({%slug themes-override%}). In addition, you can use the `Class` parameter of the TreeView to add a custom CSS Class and modify a specific instance of the TreeView, instead of all instances on the page. + +>caption Change the expand/collapse icons in TreeView + +````CSHTML +@* If your Telerik.UI.for.Blazor version is 4.3.0 or later, use the following CSS. *@ +@* Render the desired SVG icon and inspect it with your dev tools to get its path. *@ + + +@* If your Telerik.UI.for.Blazor version is below 4.3.0, use this CSS. *@ +@* Copy the unicode of your desired icon from the Progress Design System - https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/ *@ + +@* *@ + + + +@code { + private IEnumerable FlatData { get; set; } + + private IEnumerable ExpandedItems { get; set; } = new List(); + + protected override void OnInitialized() + { + FlatData = GetFlatData(); + + ExpandedItems = FlatData.Where(x => x.HasChildren == true).ToList(); + } + + List GetFlatData() + { + List items = new List(); + + items.Add(new TreeItem() + { + Id = 1, + Text = "wwwroot", + ParentId = null, + HasChildren = true, + Icon = SvgIcon.Folder + }); + items.Add(new TreeItem() + { + Id = 2, + Text = "css", + ParentId = 1, + HasChildren = true, + Icon = SvgIcon.Folder + }); + items.Add(new TreeItem() + { + Id = 3, + Text = "js", + ParentId = 1, + HasChildren = true, + Icon = SvgIcon.Folder + }); + items.Add(new TreeItem() + { + Id = 4, + Text = "site.css", + ParentId = 2, + Icon = SvgIcon.Css + }); + items.Add(new TreeItem() + { + Id = 5, + Text = "scripts.js", + ParentId = 3, + Icon = SvgIcon.Js + }); + + return items; + } + + public class TreeItem + { + public int Id { get; set; } + public string Text { get; set; } + public int? ParentId { get; set; } + public bool HasChildren { get; set; } + public ISvgIcon Icon { get; set; } + } +} +```` +## See Also +- [TreeView Overview]({%slug treeview-overview%}) +- [Telerik Icons List](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/) From 08a76cbfa5d7ef68579756b85d7ae76e7a10c267 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:08:27 +0200 Subject: [PATCH 2/6] Update knowledge-base/treeview-change-expand-collapse-icons.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/treeview-change-expand-collapse-icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/treeview-change-expand-collapse-icons.md b/knowledge-base/treeview-change-expand-collapse-icons.md index 873758950..7a8850ae7 100644 --- a/knowledge-base/treeview-change-expand-collapse-icons.md +++ b/knowledge-base/treeview-change-expand-collapse-icons.md @@ -1,6 +1,6 @@ --- title: Change the Expand and Collapse Icons in TreeView -description: Learn how to customize the expand and collapse icons in the TreeView component for Blazor. +description: Learn how to customize the expand and collapse icons in the Telerik TreeView component for Blazor. type: how-to page_title: How to Customize Expand and Collapse Icons in Blazor TreeView slug: treeview-kb-change-expand-collapse-icons From f98fa903e767f572404e61fe2fa12db5a2ebb6d3 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:08:41 +0200 Subject: [PATCH 3/6] Update knowledge-base/treeview-change-expand-collapse-icons.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/treeview-change-expand-collapse-icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/treeview-change-expand-collapse-icons.md b/knowledge-base/treeview-change-expand-collapse-icons.md index 7a8850ae7..ef19d6e5f 100644 --- a/knowledge-base/treeview-change-expand-collapse-icons.md +++ b/knowledge-base/treeview-change-expand-collapse-icons.md @@ -4,7 +4,7 @@ description: Learn how to customize the expand and collapse icons in the Telerik type: how-to page_title: How to Customize Expand and Collapse Icons in Blazor TreeView slug: treeview-kb-change-expand-collapse-icons -tags: treeview, blazor, icons, expand, collapse, customization +tags: blazor, treeview, icons, expand, collapse res_type: kb ticketid: 1656109 --- From 5afb16b03237b480ce6f5eb95651f631eced3f8b Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:08:54 +0200 Subject: [PATCH 4/6] Update knowledge-base/treeview-change-expand-collapse-icons.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- .../treeview-change-expand-collapse-icons.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/knowledge-base/treeview-change-expand-collapse-icons.md b/knowledge-base/treeview-change-expand-collapse-icons.md index ef19d6e5f..02637039f 100644 --- a/knowledge-base/treeview-change-expand-collapse-icons.md +++ b/knowledge-base/treeview-change-expand-collapse-icons.md @@ -12,12 +12,12 @@ ticketid: 1656109 ## Environment - - - - - - + + + + + +
ProductTreeView for Blazor
ProductTreeView for Blazor
## Description From 64903364b49458e62c8287136c312de3909161d0 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:09:11 +0200 Subject: [PATCH 5/6] Update knowledge-base/treeview-change-expand-collapse-icons.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/treeview-change-expand-collapse-icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/treeview-change-expand-collapse-icons.md b/knowledge-base/treeview-change-expand-collapse-icons.md index 02637039f..9f4e037da 100644 --- a/knowledge-base/treeview-change-expand-collapse-icons.md +++ b/knowledge-base/treeview-change-expand-collapse-icons.md @@ -21,7 +21,7 @@ ticketid: 1656109 ## Description -I want to customize the icons used for expanding and collapsing items in the [TreeView]({%slug treeview-overview%}) for Blazor. +I want to customize the icons used for expanding and collapsing items in the [TreeView for Blazor]({%slug treeview-overview%}). This knowledge base article answers the following questions: - How can I use custom icons for the TreeView expand and collapse functionality? From 46ec71555e883ad0c4cd26a48523aaf9dbe67359 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 13 Dec 2024 10:20:27 +0200 Subject: [PATCH 6/6] chore(TreeView): address feedback --- knowledge-base/treeview-change-expand-collapse-icons.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/knowledge-base/treeview-change-expand-collapse-icons.md b/knowledge-base/treeview-change-expand-collapse-icons.md index 9f4e037da..d553465a2 100644 --- a/knowledge-base/treeview-change-expand-collapse-icons.md +++ b/knowledge-base/treeview-change-expand-collapse-icons.md @@ -34,7 +34,7 @@ You can change the expand/collapse icons in the TreeView by overriding the built >caption Change the expand/collapse icons in TreeView ````CSHTML -@* If your Telerik.UI.for.Blazor version is 4.3.0 or later, use the following CSS. *@ +@* In Telerik.UI.for.Blazor version 4.3.0 and later, the components use SVG icons by default. Use the following CSS for versions 4.3.0 and later. *@ @* Render the desired SVG icon and inspect it with your dev tools to get its path. *@ -@* If your Telerik.UI.for.Blazor version is below 4.3.0, use this CSS. *@ +@* In Telerik.UI.for.Blazor version below 4.3.0, the components use Font icons by default. Use this CSS for versions prior to 4.3.0. *@ @* Copy the unicode of your desired icon from the Progress Design System - https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/ *@ @*