This is a migrated thread and some comments may be shown as answers.

Including any content in diagram

5 Answers 19 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Emanuele
Top achievements
Rank 1
Veteran
Emanuele asked on 23 Oct 2020, 02:23 PM

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

5 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 27 Oct 2020, 08:33 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Emanuele
Top achievements
Rank 1
Veteran
answered on 28 Oct 2020, 09:09 AM

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?

0
Vessy
Telerik team
answered on 02 Nov 2020, 09:57 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Emanuele
Top achievements
Rank 1
Veteran
answered on 01 Dec 2020, 02:07 PM

Hi Vessy,

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

 

0
Vessy
Telerik team
answered on 04 Dec 2020, 11:55 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
Emanuele
Top achievements
Rank 1
Veteran
Answers by
Vessy
Telerik team
Emanuele
Top achievements
Rank 1
Veteran
Share this question
or