html/css in treeview

[Frederik Gysel]

Dear,

Stackblitz: https://stackblitz.com/edit/xt11ijcm?file=index.html

In (older) version 24.2.6 it's possible to use html code in the nodeText of a treeview item:

In the latest version, this no longer appears to be possible?

Is there any specific reason for that and how can I continue to use html/css in the nodeText of treeview items?

If your proposal would be to use htmAttributes then please advise how to prevent css inheritance on the child list item nodes. 

Thx

Frederik

[Praveen Sellappan]

Hi Frederik,

Greetings from Syncfusion Support!

We understand the issue you're facing the HTML elements are no longer rendering properly in the Tree View nodes.

This behavior change is due to the enableHtmlSanitizer property, which is now enabled by default (set to true) in the Tree View. When enabled, it sanitizes any suspected untrusted HTML strings/scripts before rendering them, preventing potential XSS risks. In older versions, this property defaulted to false, which is why the HTML rendered directly without issues.

Solution:

You can resolve this by explicitly setting enableHtmlSanitizer to false in your Tree View configuration. This will allow the HTML content to render as before.

Code Snippet:

var treeViewInstance = new ej.navigations.TreeView({

            fields: { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' },

            enableHtmlSanitizer :false

        });

 

We have updated your sample accordingly by setting enableHtmlSanitizer: false, and the HTML now renders correctly as expected.

Here is the modified sample for your reference: https://stackblitz.com/edit/xt11ijcm-nxtljjb4?file=index.html

Release notes

Essential Studio for EJ2 JavaScript 2024 Volume 1 main Release Release Notes

Kindly review the sample and check it resolves your issue.

Regards,

Praveen Sellappan