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

12 posts, 0 answers
  1. Ather
    Ather avatar
    2 posts
    Member since:
    Jun 2014

    Posted 12 Jul 2014 Link to this post

    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
  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 14 Jul 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Don
    Don avatar
    40 posts
    Member since:
    Apr 2009

    Posted 04 Aug 2014 Link to this post

    Can I use the path attribute to display an Image? Is there another way to do that?
  5. Andrew
    Andrew avatar
    6 posts
    Member since:
    Aug 2014

    Posted 05 Aug 2014 Link to this post

    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
  6. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 07 Aug 2014 Link to this post

    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.

     
  7. Andrew
    Andrew avatar
    6 posts
    Member since:
    Aug 2014

    Posted 18 Aug 2014 in reply to Slav Link to this post

    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>
  8. Andrew
    Andrew avatar
    6 posts
    Member since:
    Aug 2014

    Posted 18 Aug 2014 in reply to Andrew Link to this post

    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>
  9. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 20 Aug 2014 Link to this post

    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.

     
  10. Ather
    Ather avatar
    2 posts
    Member since:
    Jun 2014

    Posted 16 Sep 2014 Link to this post

    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
  11. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 18 Sep 2014 Link to this post

    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.

     
  12. Graeme
    Graeme avatar
    3 posts
    Member since:
    Jul 2013

    Posted 12 Aug 2015 Link to this post

    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

  13. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 17 Aug 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017