How To add Icon In parent child and sub child node?

Replace "child-icon-class" with the CSS class that represents the icon for child and sub-child nodes.
We use the itemTemplate property to customize the rendering of each node. The childTemplate JavaScript function is called for each node in the TreeView, and it conditionally adds an icon for nodes with children.

Make sure to define your CSS classes for the icons (parent-icon-class and child-icon-class) in your CSS stylesheet, or you can use an icon library like FontAwesome or Material Icons to set the icons.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mithun Pradhan3y ago
Solved

----------------------

${Name}
")">

public async Task OnGetAsync()
{

FruitsListViewModel= await _userService.GetFruitsListAsync(Id);
TreeViewModel = new List
();

foreach (var data in FruitsListViewModel)
{
var treeViewNode = new
{
  data.Id,
data.parentId,
data.Name,
HasChild = data.FruitsCategory!= 3,
Expanded = !data.IsDefault,
data.IsDefault,

Icon = GetIcon(data)

};

TreeViewModel.Add(treeViewNode);
}

}

private string GetIcon(FruitsListViewModel data)
    {
        switch (data.FruitsCategory)
        {
            case 1:
                return "fruits";
            case 2:
                return "fruits-item";
            case 3:
                return "fruits-label";
            case 4:
                return "fruits-edit";
            default:
                return "";
        }
    }
Nitin Kumar3y ago






Replace "child-icon-class" with the CSS class that represents the icon for child and sub-child nodes.

We use the itemTemplate property to customize the rendering of each node. The childTemplate JavaScript function is called for each node in the TreeView, and it conditionally adds an icon for nodes with children.

Make sure to define your CSS classes for the icons (parent-icon-class and child-icon-class) in your CSS stylesheet, or you can use an icon library like FontAwesome or Material Icons to set the icons.