SVG icons in treeview using svg content/svgpath

Question

I am using blazor treeview with data binding from API call.

For root nodes and child nodes I have to display node icon ( before node text)[ not expanding collapsing Icons].

Directly I dont have SVG image but we have svg path , for example

PathRoot = "M20.45,6.11l-8-4a.956.956,0,0,0-.9,0l-8,4A.988.988,0,0,0,3,7V17.3l2,1.05V14.62l6,3v3.86L12,22l1-.5V17.62l6-3v3.85l2-1V7A.988.988,0,0,0,20.45,6.11ZM13,4.62,17.76,7,13,9.38Zm6,4v2.76L16.24,10Zm-8-4V9.38L6.24,7Zm-6,4L7.76,10,5,11.38Zm6,6.76L6.24,13l.08-.04L10,11.12l1,.5Zm2,0V11.62l1-.5L17.76,13Z";

this is for root and we have other paths for child and other type of elements.

How can I display image for node using this SVG path?

Prasanth Madhaiyan · Answer

Hi Balaji,Greetings from Syncfusion support.Based on the shared details, we understand that you want to show the expand and collapse icons using the SVG path in the Blazor TreeView component. To achieve your mentioned requirement in the TreeView component, you can set the SVG path value for the below highlighted expand and collapse CSS classes based on the TreeView node levels.Refer to the below code snippets. … For your reference, we have attached the sample and screenshot:Sample: https://blazorplayground.syncfusion.com/rXBpXAhryXhzukOaScreenshot: Check out the attached sample and let us know if you need any further assistance.Regards,Prasanth Madhaiyan.

Balaji · Answer

@

Prasanth Madhaiyan

No this is not at all usefull.. As I already mention It should not change expanding collapsing ICONS. ​ also we have 'n' level of childs with different categories/types, based on type we have to programmatically set the ICON. We cant hardcode like this.And the expected treeview with SVG icons..is attached here. After expanding and collapsing icons we are displaying SVG icons. i.e Before each node text we have to display the SVG ICON with dynamic content based on type we are specifying.

Prasanth Madhaiyan · Answer

Hi Balaji,Based on the shared details, we understand that you want to display the SVG icon before each node text in the Blazor TreeView component at your end. To achieve your requirement, you can utilize the TreeView component's IconCss field property. Based on this property's value, you can set the SVG icon for the corresponding nodes.Refer to the below code snippets. @code { public class DriveData { public string NodeId { get; set; } public string NodeText { get; set; } public bool Expanded { get; set; } public bool Selected { get; set; } public string Icon { get; set; } public List Children; } List Drive = new List(); protected override void OnInitialized() { base.OnInitialized(); List Folder1 = new List(); Drive.Add(new DriveData { NodeId = "01", NodeText = "Local Disk (C:)", Icon = "firstLevel", Expanded = true, Children = Folder1, }); List File1 = new List(); List File1A = new List(); Folder1.Add(new DriveData { NodeId = "01-01", NodeText = "Program Files", Icon = "secondLevel", Expanded = true, Children = File1 }); File1.Add(new DriveData { NodeId = "01-01-01", NodeText = "Windows NT", Icon = "thirdLevel", Expanded = true, Children = File1A }); File1A.Add(new DriveData { NodeId = "01-01-01-01", NodeText = "Child item", }); } } For your reference, we have attached the sample and screenshot. Based on your need, you can customize it to your end.Sample: https://blazorplayground.syncfusion.com/BjVzNArIBkUvfZTDScreenshot: Check out the attached sample and let us know if you need any further assistance.Regards,Prasanth Madhaiyan.

Balaji · Answer

Could you please let us know which .js (javascript) files we need to add as script reference to view SVG icons.. as we are using only few of SF controls no need to load all script files as static source. We are adding ref to few of script files which we required. Afetr updating with suggested code still, we are facing issue with display SVG icons.

Need the script files (Names) which we need to add/refer in our project to get display of svg icons.
Also, is there in way to provide content property from backend.. because, we have 'n' number of levels, so we can't hard code path="...." for each level... some thing like this...

@code{

string Pathvariable ="M234..355345"

};

.custom.e-treeview .e-list-icon.derivedTemplate1 {

content: url('data:image/svg+xml;utf8, <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"><path d="@Pathvariable"/></svg>');

font-size: 8px !important;

}

Also can we able to display indentation lines( vertical dotted lines) for SF treeview like below

Balaji · Answer

Hi ,Any update on above questions? Indentation lines and providing SVG path from c# instead of giving from CSS files?Could you please make it prioritize? we are working to show demo on Syncfusion treeview with these specific features.. if all goes good we can use licensed version of it.Thanks,Balaji.A

Prasanth Madhaiyan · Answer

Hi Balaji,Query 1: providing SVG path from c# instead of giving from CSS files?Regarding the above query, to achieve your mentioned requirement, you can utilize the Blazor TreeView components' template support, and we have prepared a template sample aligned with your exact mentioned requirement.Refer to the below code snippets.

@{ if (!string.IsNullOrEmpty(context.IconPath)) { } }

@context.NodeText

@code { public class DriveData { public string NodeId { get; set; } public string NodeText { get; set; } public bool Expanded { get; set; } public bool Selected { get; set; } public string IconPath { get; set; } // Added IconPath property to hold SVG path public List Children; } List Drive = new List(); protected override void OnInitialized() { base.OnInitialized(); List Folder1 = new List(); // Define SVG paths here string firstLevelIcon = "M20.45,6.11l-8-4a.956.956,0,0,0-.9,0l-8,4A.988.988,0,0,0,3,7V17.3l2,1.05V14.62l6,3v3.86L12,22l1-.5V17.62l6-3v3.85l2-1V7A.988.988,0,0,0,20.45,6.11ZM13,4.62,17.76,7,13,9.38Z"; string secondLevelIcon = "M12 22s-8-4.3-8-12a8 8 0 1 1 16 0c0 7.7-8 12-8 12zm-2-10h4v-4h-4v4z"; string thirdLevelIcon = "M20.5 10h-2.2l-1.7-4H7.4l-1.7 4H3.5l4.1 3.1L5.7 19h3.5l1.7-4h4.6l1.7 4h3.5l-3.9-5.9L20.5 10zM12 15.2l1.9-4.5L12 6.8l-1.9 3.9L12 15.2z"; Drive.Add(new DriveData { NodeId = "01", NodeText = "Local Disk (C:)", Expanded = true, IconPath = firstLevelIcon, Children = Folder1, }); List File1 = new List(); List File1A = new List(); Folder1.Add(new DriveData { NodeId = "01-01", NodeText = "Program Files", Expanded = true, IconPath = secondLevelIcon, Children = File1 }); File1.Add(new DriveData { NodeId = "01-01-01", NodeText = "Windows NT", IconPath = thirdLevelIcon, Expanded = true, Children = File1A }); File1A.Add(new DriveData { NodeId = "01-01-01-01", NodeText = "Child item", }); } } For your reference, we have attached the sample.Sample: https://blazorplayground.syncfusion.com/BZrTNKBQTWmNdVYoQuery 2: Can we able to display indentation lines( vertical dotted lines) for SF treeview.Regarding the above query, we considered this requirement as a feature request in the Blazor TreeView component on our end. Support for this feature will be included in our anyone of upcoming volume release.Generally, we will plan the feature implementation based on feature rank, Wishlist plan, and customer request count for some features.Please, track the feature implementation status through the below feedback portal link.https://www.syncfusion.com/feedback/52136/provide-line-support-to-connect-the-blazor-treeview-nodesCheck out the shared details and let us know if you need any further assistance.Regards,Prasanth Madhaiyan.

Balaji · Answer

Hi thanks for your reply 1. we are able to set ICON.. but can we implement this ICON path from c# without " TreeViewTemplates and NodeTemplate" we are binding data like this 2. Also we need to reduce opacity of few node elements based on treedata condition like if node data type is "member" then reduce opacity with css. all should be done using Blazor c#, we are not allowed to use Javascript.need answers for above two questions..Finally we are going to use SF treeview with licensed version from organization..Thanks for the help.

LeoLavanya Dhanaraj · Answer

Hi Balaji,Query 1 : Providing SVG path from c# without using nodeTemplate:Sorry for the inconvenience. We can customize this icon (SVG element) using CSS or Template support in the Blazor TreeView component.For further information check out the below links.https://blazor.syncfusion.com/documentation/appearance/iconsQuery 2 : Reduce opacity value based on condition:Based on your requirement, we have prepared a Blazor TreeView Sample. You can reduce the opacity value for particular nodes in the TreeView component by setting the custom class in the data source using HtmlAttributes property for specific nodes. Then you can ad the related styles in the CSS using the custom class name.Refer to the blow code snippet and sample.Sample : https://blazorplayground.syncfusion.com/hXrfDzNigQEoXQIv public class DriveData { … public Dictionary htmlAttributes { get; set; } } protected override void OnInitialized() { … File1A.Add(new DriveData { NodeId = "01-01-01-01", NodeText = "Child item", htmlAttributes = new Dictionary() { { "class", "opacity-reduced" } } }); } } Follow the above shared details and get back to us if you need any further assistance.Regards,Leo Lavanya Dhanaraj