Assistance Required to Customize IgniteUI Tree Layout and Styling

Hello Infragistics Support Team,

I need assistance with redesigning the Tree component in our application.

We are currently using the following versions:

• IgniteUI (Infragistics): 24.1.9
• Infragistics.Web.Mvc: 5.24.1.2

This is the design we currently have:

Our goal is to achieve a layout similar to the following:

From what I can tell, the container that hosts the tree control is part of our custom implementation. However, I would like to understand whether the following aspects of the tree can be customized using IgniteUI:

• Expand/collapse arrow positioning
• Node indentation and alignment
• Node styling and spacing
• Overall tree structure and appearance to match the target design

The current Tree configuration is the following:
@(Html.Infragistics().Tree(@Model)
.InitialExpandDepth(1)
.Height(“500px”)
.Width(“100%”)
.ID(“arbolServicioFuncion”)
.Bindings(b =>
b.TextKey(“DesServicio”)
.PrimaryKey(“CodServicio”)
.ValueKey(“CodServicio”)
.ChildDataProperty(“FuncionesServicio”)
.Bindings(b2 =>
b2.TextKey(“DesFuncion”)
.PrimaryKey(“CodFuncion”)
.ValueKey(“CodFuncion”)
)
)
.AddClientEvent(“selectionChanged”, “actualizarGridParametros”)
.AddClientEvent(“dataBound”, “seleccionarNodo”)
.DataBind()
.Render())

Could you please provide guidance on whether the desired design can be achieved with the current Tree component configuration?

Specifically, I would like to know:

1. Can the expand/collapse icons be repositioned and restyled?
2. Is it possible to customize the node template or rendering structure?
3. Can the indentation, spacing, and hierarchy presentation be modified through configuration or CSS?
4. Would achieving the target design require custom templates, custom CSS, or a different Infragistics component?
5. Are there any limitations in IgniteUI 24.1.9 that we should be aware of?

If possible, please provide a step-by-step approach and sample code illustrating the recommended implementation.

Thank you for your assistance.

Best regards

Hello,

Thank you for posting in our community!

Based on the current implementation, the desired design can be achieved using a combination of NodeContentTemplate and custom CSS overrides.

The NodeContentTemplate option allows you to define a simplified custom HTML structure for each node. This is particularly useful because it enables you to attach your own CSS classes (e.g., for parent labels or pill-style child nodes) and then apply precise styling through CSS.

Apart from using the NodeContentTemplate, the rest of the visual customization should be handled by overriding the default igTree CSS classes. Here can be found a full list of all default igTree CSS classes and what they are used for.

Answers to your specific questions:

• Can the expand/collapse icons be repositioned and restyled?
  Yes — this can be done entirely via CSS overrides (e.g., repositioning the expander and replacing icons with custom ones).
• Is it possible to customize the node template or rendering structure?
  Yes — the NodeContentTemplate option allows you to define custom HTML for the node content.
• Can the indentation, spacing, and hierarchy presentation be modified through configuration or CSS?
  These aspects are controlled via CSS and can be adjusted by overriding the default classes.
• Would achieving the target design require custom templates, custom CSS, or a different Infragistics component?
  A custom node template (via NodeContentTemplate) combined with CSS overrides is sufficient. This is the recommended approach for easier styling through custom classes.
• Are there any limitations in IgniteUI 24.1.9 that we should be aware of?
  There are no limitations relevant to this scenario that would prevent achieving the desired design.

In summary, the combination of NodeContentTemplate for structure and CSS overrides for styling provides enough flexibility to replicate the target layout without requiring a different component.

Below is a small example of how the igTree and its nodes can be styled. This aims to demonstrate a possible approach to achieving your desired design and may require additional adjustments.

<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
</head>

<body>
    @(Html.Infragistics().Tree(Model)
        .InitialExpandDepth(1)
        .Height("500px")
        .Width("100%")
        .ID("arbolServicioFuncion")
        .HotTracking(false)
        .Bindings(b =>
        {
            b.TextKey("DesServicio")
            .PrimaryKey("CodServicio")
            .ValueKey("CodServicio")
            .ChildDataProperty("FuncionesServicio")
            .NodeContentTemplate("<span class='node'>${DesServicio}</span>");
            b.Bindings(b2 =>
            {
                b2.TextKey("DesFuncion")
                .PrimaryKey("CodFuncion")
                .ValueKey("CodFuncion")
                .NodeContentTemplate("<span class='node-pill'>${DesFuncion}</span>");
            });
        })
        .DataBind()
        .Render()
        )
</body>

body {
    background-color: #f5f5f5;
}

/* Remove selected state style */
.ui-state-active {
    border: none !important;
    background-color: unset !important;
}

/* Remove focused state style */
.ui-state-focus {
    border: none !important;
    background-color: unset !important;
}

/* Position icon on the right */
.ui-igtree-expander {
    left: unset !important;
    right: .8em;
}

/* Set chevron-down icon */
.ui-icon-triangle-1-s:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    font-size: 16px;
    color: #d32f2f;
}

/* Set chevron-up icon */
.ui-icon-triangle-1-e:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f077";
    font-size: 16px;
    color: #d32f2f;
}

.ui-igtree-parentnode {
    padding-left: unset;
    padding-right: 1.9em;
}

/* Increase child node indentation */
.ui-igtree-node-nochildren {
    margin-left: 2.5em;
}

/* Style tree container */
.ui-igtree {
    width: fit-content !important;
    background-color: #fff;
    padding: 24px;
    border-radius: 24px;
    box-shadow: 0px 0px 4px grey;
}

/* Style parent node */
.node {
    font-weight: 500;
}

/* Style child node */
.node-pill {
    background: #fde7ea;
    color: #d32f2f;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
}

/* Draw connection line from parent to child node */
.ui-igtree .ui-igtree-node-nochildren::before {
    content: "";
    position: absolute;
    left: -1.8em;
    top: -4px;
    height: 24px;
    width: 32px;
    border-left: 1.5px solid #dcdcdc;
    border-bottom: 1.5px solid #dcdcdc;
}

Please let me know if you need any further information on the matter.

Sincerely,
Riva Ivanova
Software Developer
Infragistics