diff --git a/components/treeview/selection/multiple.md b/components/treeview/selection/multiple.md index 091dc630b..170fde148 100644 --- a/components/treeview/selection/multiple.md +++ b/components/treeview/selection/multiple.md @@ -396,5 +396,6 @@ You can bind the treeview to different models at each level, and the selection a ## See Also - * [Selection Overview](slug:treeview-selection-overview) - * [Single Selection](slug:treeview-selection-single) +* [Selection Overview](slug:treeview-selection-overview) +* [Single Selection](slug:treeview-selection-single) +* [Apply Selection Styles Only on TreeView Item Text](slug:treeview-kb-node-selection-only-on-item-text) diff --git a/components/treeview/selection/overview.md b/components/treeview/selection/overview.md index 6cb6d16bc..bb29b9176 100644 --- a/components/treeview/selection/overview.md +++ b/components/treeview/selection/overview.md @@ -141,6 +141,7 @@ If you want to extract details for the selection from `SelectedItems`, you need ## See Also - * [Live Demo: TreeView Selection](https://demos.telerik.com/blazor-ui/treeview/selection) - * [Single Selection](slug:treeview-selection-single) - * [Multiple Selection](slug:treeview-selection-multiple) +* [Live Demo: TreeView Selection](https://demos.telerik.com/blazor-ui/treeview/selection) +* [Single Selection](slug:treeview-selection-single) +* [Multiple Selection](slug:treeview-selection-multiple) +* [Apply Selection Styles Only on TreeView Item Text](slug:treeview-kb-node-selection-only-on-item-text) diff --git a/components/treeview/selection/single.md b/components/treeview/selection/single.md index 1b1e7fb82..4d7f86e64 100644 --- a/components/treeview/selection/single.md +++ b/components/treeview/selection/single.md @@ -283,5 +283,6 @@ You can use two-way binding to get the node the user has selected. This can be u ## See Also - * [Selection Overview](slug:treeview-selection-overview) - * [Multiple Selection](slug:treeview-selection-multiple) +* [Selection Overview](slug:treeview-selection-overview) +* [Multiple Selection](slug:treeview-selection-multiple) +* [Apply Selection Styles Only on TreeView Item Text](slug:treeview-kb-node-selection-only-on-item-text) diff --git a/knowledge-base/treeview-node-selection-only-on-item-text.md b/knowledge-base/treeview-node-selection-only-on-item-text.md new file mode 100644 index 000000000..b84af66a8 --- /dev/null +++ b/knowledge-base/treeview-node-selection-only-on-item-text.md @@ -0,0 +1,232 @@ +--- +title: TreeView Selection Styles Apply to Full Item Width +description: +type: troubleshooting +page_title: How to Prevent the TreeView Selection and Hover Styles From Applying to the Full Item Width +meta_title: How to Prevent the TreeView Selection and Hover Styles From Applying to the Full Item Width +slug: treeview-kb-node-selection-only-on-item-text +tags: telerik, blazor, treeview, styles +ticketid: 1716441 +res_type: kb +--- + +## Environment + + + + + + + + + + + + +
ProductTreeView for Blazor
Version14.0.0 and above
+ +## Description + +After upgrading Telerik UI for Blazor to version 14 and above, the focus, hover and selection styles span over the whole TreeView node. In older versions, these styles were applied only to the TreeView item text. This article shows how to restore the legacy component appearance. + +## Cause + +The change in the TreeView styling aims to improve the UX in the new [DropDownTree component](slug:dropdowntree-overview), which must support focus, hover and selection styles on the whole dropdown width, which means on the whole TreeView width. + +## Solution + +There are two ways to apply focus, hover, and selection styles on the TreeView item text only: + +* [Automatically restrict the TreeView width, based on the node levels and node text length](#restrict-treeview-width). +* [Override the Telerik CSS theme, remove the selection, hover, and focus styles from their default TreeView element and apply them to a child element](#move-styles-to-child-element). + +### Restrict TreeView Width + +Set a custom `Class` to the TreeView and use the CSS class to apply a `width: max-content` style. As a result, the TreeView will automatically shrink horizontally, based on the number of node levels and the largest node text length. The approach is simpler, but the focus, hover, and selection styles will start from the left end of the TreeView. + +>caption Restrict TreeView width and focus shadow, hover background, and selection background + +````RAZOR + + + + +@code { + private IEnumerable FlatData { get; set; } = new List(); + private IEnumerable TreeViewSelectedItems { get; set; } = new List(); + private IEnumerable ExpandedItems { get; set; } = new List(); + + private int TreeLevels { get; set; } = 3; + private int RootItems { get; set; } = 2; + private int ItemsPerLevel { get; set; } = 2; + private int IdCounter { get; set; } = 1; + + protected override void OnInitialized() + { + FlatData = LoadFlat(); + + ExpandedItems = FlatData.Where(x => x.HasChildren == true); // && x.ParentId == null + } + + private List LoadFlat() + { + List items = new List(); + + PopulateChildren(items, null, 1); + + return items; + } + + private void PopulateChildren(List items, int? parentId, int level) + { + var itemCount = level == 1 ? RootItems : ItemsPerLevel; + for (int i = 1; i <= itemCount; i++) + { + var itemId = IdCounter++; + items.Add(new TreeItem() + { + Id = itemId, + Text = $"Level {level} Item {i}", + ParentId = parentId, + HasChildren = level < TreeLevels + }); + + if (level < TreeLevels) + { + PopulateChildren(items, itemId, level + 1); + } + } + } + + public class TreeItem + { + public int Id { get; set; } + public int? ParentId { get; set; } + public bool HasChildren { get; set; } + public string Text { get; set; } = string.Empty; + public object? Icon { get; set; } + + } +} +```` + +### Move Styles to Child Element + +[Override the Telerik CSS theme](slug:themes-override), remove the selection, hover, and focus styles from their default TreeView element and apply them to a child element. This approach is more complex to implement, but achieves the exact same TreeView styling from versions 13.x and before. + +>caption Move TreeView focus, hover, and selection styles to a child element + +````RAZOR + + + + +@code { + private IEnumerable FlatData { get; set; } = new List(); + private IEnumerable TreeViewSelectedItems { get; set; } = new List(); + private IEnumerable ExpandedItems { get; set; } = new List(); + + private int TreeLevels { get; set; } = 3; + private int RootItems { get; set; } = 2; + private int ItemsPerLevel { get; set; } = 2; + private int IdCounter { get; set; } = 1; + + protected override void OnInitialized() + { + FlatData = LoadFlat(); + + ExpandedItems = FlatData.Where(x => x.HasChildren == true); // && x.ParentId == null + } + + private List LoadFlat() + { + List items = new List(); + + PopulateChildren(items, null, 1); + + return items; + } + + private void PopulateChildren(List items, int? parentId, int level) + { + var itemCount = level == 1 ? RootItems : ItemsPerLevel; + for (int i = 1; i <= itemCount; i++) + { + var itemId = IdCounter++; + items.Add(new TreeItem() + { + Id = itemId, + Text = $"Level {level} Item {i}", + ParentId = parentId, + HasChildren = level < TreeLevels + }); + + if (level < TreeLevels) + { + PopulateChildren(items, itemId, level + 1); + } + } + } + + public class TreeItem + { + public int Id { get; set; } + public int? ParentId { get; set; } + public bool HasChildren { get; set; } + public string Text { get; set; } = string.Empty; + public object? Icon { get; set; } + + } +} +```` + +## See Also + +* [Override Telerik CSS theme styles](slug:themes-override) +* [TreeView Selection](slug:treeview-selection-overview) +* [TreeView Overview](slug:treeview-overview)