Can we use a custom shape (i.e. Image) in the diagram

[Ather]

Hi All,

I want to use custom shape, means an image instead of circles/rectangles. Do anybody have any idea to do this.

Thanks in Advance,
Shaikh

[Vessy]

Hello Ather,

I would suggest you to review the help topic below which elaborates on the scenario you want to achieve and how it could be done:
Custom Shapes and Connectors

Hope this helps.

Regards,
Vessy
Telerik

 

 

[Don]

Can I use the path attribute to display an Image? Is there another way to do that?

[Andrew]

I am also looking for a way to use custom images as the shapes? Can you set the path property to an absolute url to the image file?

I can probably create my images as SVG if that helps, that link you posted just talks about custom shapes not using images such as png

[Slav]

Hello Andrew,

You can define a shape template that includes image elements and path elements as described in the following help article: http://www.telerik.com/help/aspnet-ajax/diagram-shape-templates.html.

Since the example in the help article only shows the approach for creating a shape template and does not include the mentioned elements I have added an example that demonstrates how they can be used.

Regards,
Slav
Telerik

 

 

[Andrew]

that looks like its almost what i want but I am using a sidebar with images in it so i need to run this code on the drop event but ive tried all ways and it just drops an empty shape on to the diagram? for example:

  <script>
            function diagram_load(diagram, args) {
                var element = diagram.get_element();

                $telerik.$(element).kendoDropTarget({
                    drop: function (e) {
                        var draggable = e.draggable,
                             element = e.dropTarget,
                             diagram = element.getKendoDiagram();

                        if (draggable && draggable.hint) {
                            var dataviz = kendo.dataviz;

                            var group = new dataviz.diagram.Group({
                                autoSize: true
                            });

                            var path = new dataviz.diagram.Path({
                                data: "M43.51,0.50 L86.50,74.50 L0.50,74.50 z"
                            });
                            group.append(path);


                            var image = new dataviz.diagram.Image({
                                source: "images/barcelona.jpg",
                                x: 25,
                                y: 30,
                                width: 38,
                                height: 38

                            });
                            group.append(image);
                            diagram.addShape(group);

                        }
                    }
                });

            }
            function getDiagram() { return $find("<%= theDiagram.ClientID %>").kendoWidget; }
        </script>

[Andrew]

Can almost get it using the code below, problem is saving as json doesnt include the image

 <script>
            function diagram_load(diagram, args) {
                var element = diagram.get_element();

                $telerik.$(element).kendoDropTarget({
                    drop: function (e) {
                        var draggable = e.draggable,
                             element = e.dropTarget,
                             diagram = element.getKendoDiagram();

                        if (draggable && draggable.hint) {
                            var item = draggable.hint.data("data"),
                                 offset = draggable.hintOffset,
                                 point = new kendo.dataviz.diagram.Point(offset.left, offset.top),
                                 transformed = diagram.documentToModel(point);

                            item.x = transformed.x;
                            item.y = transformed.y;

                            
                            var shape = new kendo.dataviz.diagram.Shape(item);

                            var image = new kendo.dataviz.diagram.Image({
                                source: "/shapes/shape-1.png",
                                x: 0,
                                y: 0,
                                width: 119,
                                height: 73

                            });

                            shape.visual.append(image);

                            //diagram.addShape(item);
                            diagram.addShape(shape);
                        }
                    }
                });

            }
            function getDiagram() { return $find("<%= theDiagram.ClientID %>").kendoWidget; }
        </script>

[Slav]

Hi Andrew,

The visual templates of the RadDiagram shapes are methods and they are not serialized. This is why the image is not stored in the exported JSON.

Alternatively you can try setting a custom value of the Type property of each shape, depending on the image inside. When the diagram is loaded from JSON, you could apply a visual template with different image after checking the type of the shape, similarly to the approach that is used in the overview demo: http://demos.telerik.com/aspnet-ajax/diagram/examples/overview/defaultcs.aspx

Regards,
Slav
Telerik

 

 

[Ather]

I have found that in the Demo the connector lines are straight and band at 90 degrees snapshot is attached. I tried to do the same but it always create only straight lines between two shapes, will anybody know this solution.

Regards,
Ather

[Slav]

Hello Ather,

This effect is achieved via PointsCollections, which are explained in the following help article: http://www.telerik.com/help/aspnet-ajax/diagram-shapes-connections.html

You can check them in action in the source of the Overview demo of RadDiagram that is visible in your screenshot: http://demos.telerik.com/aspnet-ajax/diagram/examples/overview/defaultcs.aspx

Regards,
Slav
Telerik

 

 

[Graeme]

Hi folks,

 I'd like to build up more complex shapes in Diagram using multiple svg elements (paths/fills) - is it possible to do this via a group?

Cheers,

G

[Vessy]

Hi Graeme,

Yes, it is possible via the RadDiagram visual templates functionality. You can find details on how to use them along with sample code snippets here: http://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/functionality/shape-templates

Regards,
Vessy
Telerik