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

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

11 Answers 405 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Ather
Top achievements
Rank 1
Ather asked on 12 Jul 2014, 10:03 AM
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

11 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 14 Jul 2014, 01:30 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Don
Top achievements
Rank 1
answered on 04 Aug 2014, 01:25 PM
Can I use the path attribute to display an Image? Is there another way to do that?
0
Andrew
Top achievements
Rank 1
answered on 05 Aug 2014, 10:14 AM
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
0
Slav
Telerik team
answered on 07 Aug 2014, 10:50 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Andrew
Top achievements
Rank 1
answered on 18 Aug 2014, 07:46 AM
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>
0
Andrew
Top achievements
Rank 1
answered on 18 Aug 2014, 08:07 AM
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>
0
Slav
Telerik team
answered on 20 Aug 2014, 04:05 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ather
Top achievements
Rank 1
answered on 16 Sep 2014, 08:43 AM
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
0
Slav
Telerik team
answered on 18 Sep 2014, 02:37 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Graeme
Top achievements
Rank 1
answered on 12 Aug 2015, 01:11 PM

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

0
Vessy
Telerik team
answered on 17 Aug 2015, 11:28 AM
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
Tags
Diagram
Asked by
Ather
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Don
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Slav
Telerik team
Ather
Top achievements
Rank 1
Graeme
Top achievements
Rank 1
Share this question
or