CSS styling of nodes via per node classes (path shapes)

[Martin Ellis]

Is it possible to use CSS styles to apply formatting to Diagram nodes, specifically path nodes. Ideally I would like to be able to apply a class to a shape, to allow me to set effects and styles not exposed via the `style` settings of the node.

As a simpleminded example, `[node class: "important"] -> [node class:"normal"]`, where both nodes use the same path shape.

[Moulidharan Gopalakrishnan]

Hi Martin Ellis,

The EJ2 Diagram does not provide a direct class property for nodes, so CSS classes cannot be applied directly.

However, you can achieve similar functionality by using the getNodeDefaults method to set unique styles based on node IDs or by ID-based prefix selectors. We created a simple sample using CSS changes based on node IDs.

 

In the diagram, each node is rendered with an ID pattern like: nodeId + "_content_groupElement" in the DOM. By naming your nodes with consistent prefixes such as normal_ or important_, you can group them and apply styles using CSS selectors like:

• For normal nodes: [id^="normal_"][id$="_content_groupElement"] path
• For important nodes: [id^="important_"][id$="_content"] path

This approach allows you to apply advanced CSS effects such as shadows, filters, and strokes beyond the built-in style options, while keeping your styling simple and maintainable.

 

Please refer to the sample for reference: Uylcijy2 (duplicated) - StackBlitz

Regards,

Moulidharan

[Michael Taylor]

Using ID prefixes as a workaround makes sense given the lack of a node class property. It would be useful to know if this approach is stable across versions or just an internal DOM detail.

[Pranoove Karnan]

Hi Michael,

Yes, this is an internal DOM‑level behavior, and it will remain stable across versions. It is not affected by version changes.

If you have any further questions, please let us know.

Regards,
Pranoove