Including any content in diagram

[Emanuele]

Hi,

i would like to know if it is possible to include in the individual 'cells' of a diagram any HTML content or better still other UI controls, such as Cards, even better at runtime.

Thank you

[Vessy]

Hi Emanuele,

The Diagram is rendered via SVG objects, therefore it is not possible to add other controls inside its shapes. You can easily add HTML elements to the shape content, though, through the shape's Html property:

https://docs.telerik.com/devtools/aspnet-ajax/api/server/Telerik.Web.UI.Diagram/Content#html

                <telerik:DiagramShape Id="s1">
                    <ContentSettings Html="<div>Some html content here</div>" />
                    <FillSettings Color="#7F7F7F" />
                </telerik:DiagramShape>

Regards,
Vessy
Progress Telerik

[Emanuele]

Thank you Vessy, i'll try to make it enough ;-)

I have to decide what is best for a graphical display accompanied by data taken from databases: image map or diagram?

Is it possible to set the diagram so that the user cannot drag the elements but only click on the links inserted in the html content?

[Vessy]

Hi Emanuele,

Can you, please, elaborate on the exact ImageMap control you paln to use? Are you refering the RadChart Image map option? Or do you refer the TooltipManager demo?

Basically, the shapes in the diagram can be easily made read only, but the links inside them will not be clickable. The SVG shape objects has their own client-side OnClick event, though, so you can use it to handle the click over a shape and navigate to the desired url:

https://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/client-side-programming/events

For example, you can have a similar implementation:

        <script>
            function onShapeClick(args) {
                var shape = args.item;
                var content = shape.content();
                var a = createElementFromHTML(content);
                window.location = a.href;
            }

            function createElementFromHTML(htmlString) {
                var div = document.createElement('div');
                div.innerHTML = htmlString.trim();

                // Change this to div.childNodes to support multiple top-level nodes
                return div.firstChild;
            }
        </script>
        <telerik:RadDiagram ID="RadDiagram1" runat="server" Editable="false" Selectable="false" >
            <LayoutSettings Enabled="true" Type="Tree" Subtype="Right"></LayoutSettings>
            <ClientEvents OnClick="onShapeClick" />
            <ShapesCollection>
                <telerik:DiagramShape Id="s1">
                    <ContentSettings Html='<a href="https://www.telerik.com">shape 1</a>' />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="s2">
                    <ContentSettings Html='<a href="https://www.msdn.com">shape 2</a>' />
                </telerik:DiagramShape>
            </ShapesCollection>
            <ConnectionsCollection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="s1" />
                    <ToSettings ShapeId="s2" />
                </telerik:DiagramConnection>
            </ConnectionsCollection>
        </telerik:RadDiagram>

Regards,
Vessy
Progress Telerik

[Emanuele]

Hi Vessy,

i'd like to get an object like in the attached picture, with dynamically generated numbers from databases.

 

[Vessy]

Hi Emanuele,

There are two possible ways to include custom elements inside RadDiagram shapes:

• you can set the desired HTML content for each shape as suggested in my previous reply, but the data items will be not available in it
• or you can implement a custom Visual Template for the different shape types, drawing the desired layout through the Kendo UI drawing library

 

Regards,
Vessy
Progress Telerik