Diagram background customization

[Mariusz]

Hi,

How can I customize the diagram background? I would like to draw some horizontal bands with custom size, specific background colour and border to separate the diagram boxes levels. I would like to achieve something like "https://www.telerik.com/products/winforms/diagram.aspx" in section "Shapes, Container Shapes and Connections". On that page we have a sample with separation for "First Game", "Second Game" etc.

[Tsvetina]

Hello Mariusz,

The Kendo UI Diagram does not have the concept of container shapes, so providing different backgrounds to different sections or levels of the Diagram cannot be achieved. You can log a feature request about this in the feedback portal.

In order to achieve a similar look visually, it is possible to use CSS to apply a multiple-color background to the Diagram container. However, this would require you to prevent dragging of shapes and zooming of the Diagram. You can see an example here:
https://dojo.telerik.com/UdeMafuK

Regards,
Tsvetina
Progress Telerik

[Mariusz]

Thank you for your reply. Unfortunately, our diagram boxes heights are calculated dynamically and we need to have a possibility to move and zoom diagram, so we can't apply that workaround. Is there anything else we could do?

[Tsvetina]

Hi Mariusz,

At this point, I cannot suggest a way to apply different backgrounds to parts of the Diagram. The only way to represent different levels of data would be to provide a color in the shapes data, so shapes can be colored based on the level they belong to:
https://dojo.telerik.com/eNIROZiV

Regards,
Tsvetina
Progress Telerik

[Mariusz]

Thank you for your reply. Unfortunately, it's also not acceptable solution. We need to customize the background somehow.

1) Is it possible to attach to an event that is generating the diagram and apply some custom modifications?

2) Is it possible to modify the diagram (SVG) after it's generated?

3) Could you point us to the place in the source code where we could try to apply our custom solution?

[Tsvetina]

Hi Mariusz,

We cannot suggest a way to change the Diagram rendering behavior in such a way. The widget has complex rendering logic and it would require fundamental changes in the source code to add support for sections in the widget layout, which we cannot support in the form of a custom implementation.

If the Diagram that you need to draw is not very complex, you may be able to use the Drawing API to draw the UI that you want to achieve from the ground up and put the drawing elements in separate groups. The Diagram itself is based on the Drawing API but in order to enable all the interaction features, binding and built-in layouts, it relies on thousands of lines of code on top of the available APIs.

However
Regards,
Tsvetina
Progress Telerik