Kendo Diagram - wrapping labels and individual shape color without using visual template

7 posts, 0 answers
  1. Justin
    Justin avatar
    2 posts
    Member since:
    Nov 2015

    Posted 24 Nov 2015 Link to this post

    Hi,

    1. I'm trying to create a process diagram using the kendoDiagram function. However, the labels for each node are not contained inside its shape's container. I tried several methods to break the line, but none seem to work. Is it possible to wrap the text of each node so it will fit inside its shape's container?

    2. Another question, is it possible that on initial load I can give a shape a different color besides the one that is set in shapeDefaults? I am using dataSource and I assume that I can do something like:
     { id: "one", name: "C" width: 40, height: 40, type: "circle", fill: "red"}
    I tried other property names like 'color' but it does not work. 


    Please see attached sample screenshot and the script I used.


    Thanks!!

  2. Daniel
    Admin
    Daniel avatar
    2160 posts

    Posted 26 Nov 2015 Link to this post

    Hello,

    The first question seems to be the same as in this forum thread. Please check my reply there.

    Binding the color is not currently supported. If a custom visual should not be used then other option that I can suggest is to use the shapes redraw method after they are created(updated example).

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Matt
    Matt avatar
    3 posts
    Member since:
    Dec 2016

    Posted 21 Apr in reply to Daniel Link to this post

    Have you looked at those examples? They don't work.
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1941 posts

    Posted 25 Apr Link to this post

    Hello Matt,

    I am not able to replicate any issues with the examples. Could you please explain what exactly does not work in each example? 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Matt
    Matt avatar
    3 posts
    Member since:
    Dec 2016

    Posted 25 Apr in reply to Boyan Dimitrov Link to this post

    I do not see the text wrapping in the updated example.
    The labels looks awful in both Chrome and IE 11.

    http://dojo.telerik.com/@SiliconSoul/AhuvO

    I have attached a screenshot of what I'm seeing.

    In the diagram api, there is a super simple example of how to wrap text.
    http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/text-wrapping

    What is funny about the example is there is only one shape in the diagram.
    There are no other shapes with wrapping text. There are no other shapes, period.
    The example can hardly be called a "diagram".

    What would be nice to see is the way(s) you can have shapes - different types of shapes and paths - that can wrap text and be connected to each other. I see no such examples for the Kendo UI diagram.


     

     

  6. Matt
    Matt avatar
    3 posts
    Member since:
    Dec 2016

    Posted 25 Apr in reply to Matt Link to this post

    Arghhhh, this gets confusing.

    So in one of your linked posts, http://www.telerik.com/forums/labels-are-not-wrapped-within-its-shape's-container, you have an example where the shapes have wrapped text.

    http://dojo.telerik.com/@SiliconSoul/uzuQO

    However, there is only one shape type used: a rectangle. 
    Does the setup in that example only allow for one shape?

    And here is a different approach to creating a flowchart I found in the Kendo UI Cookbook (and have since modified). Using this type of setup, how would you be able to wrap text and connect shapes?

    <!DOCTYPE html>
    <html>
    <head>
        <title>Cookbook - Fork of Flowchart</title>
        <meta charset="utf-8">
        <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
        <link href="../../styles/kendo.common.min.css" rel="stylesheet">
        <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
        <link href="../../styles/kendo.default.min.css" rel="stylesheet">
        <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
        <script src="../../js/jquery.min.js"></script>
        <script src="../../js/jszip.min.js"></script>
        <script src="../../js/kendo.all.min.js"></script>
        <script src="../content/shared/js/console.js"></script>
        <style type="text/css">
            .k-diagram {
                height: 75vh;
            }
        </style>
    </head>
    <body>
     
    <a class="offline-button" href="../index.html">Back</a>
     
    <div id="diagram"></div>
     
    <script>
        $('document').ready(function () {
     
            var diagram = $("#diagram").kendoDiagram({
     
                connectionDefaults: {
                    stroke: {
                        color: '#222222'
                    },
                    endCap: {
                        type: 'ArrowEnd',
                        fill: {
                            color: "#222222"
                        },
                        stroke: {
                            color: "#222222",
                            width: 2
                        }
                    },
                    hover: {
                        stroke: {
                            color: "#02DA10",
                            fill: "#02DA10"
                        }
                    }
                }
            }).getKendoDiagram();
     
     
            function createShape(options) {
     
                var shape = new kendo.dataviz.diagram.Shape({
                    x: options.positionX,
                    y: options.positionY,
                    width: options.width || 100,
                    height: options.height || 50,
                    type: options.type,
                    path: options.path || undefined,
                    content: {
                        text: options.textData || undefined,
                        color: '#FFF'
                    },
                    fill: options.fillColor || '#0088CC'
                });
     
                return shape;
            }
     
     
            var shape1 = diagram.addShape(createShape({
                        'textData': 'Yes',
                        'type': 'circle',
                        'positionX': 424.5,
                        'positionY': 20,
                        'fillColor': 'green',
                        'width': 50
                    }
            ));
            var shape2 = diagram.addShape(createShape({
                        'textData': 'counter = 0',
                        'type': 'rectangle',
                        'positionX': 400,
                        'positionY': 125,
                        'height': 100,
                        'width': 100,
                        'path': 'M 50 0 100 50 50 100 0 50 Z' //'M 110 110 l100 -100 l100 100 l-100 100 l-100 -100' // rhombus
                    }
            ));
            var shape3 = diagram.addShape(createShape({
                        'textData': 'counter < 5',
                        'type': 'circle',
                        'positionX': 399.5,
                        'positionY': 290
                    }
            ));
            var shape4 = diagram.addShape(createShape({
                        'textData': 'Stop',
                        'type': 'circle',
                        'positionX': 600,
                        'positionY': 390,
                        'fillColor': 'red'
                    }
            ));
            var shape5 = diagram.addShape(createShape({
                        'textData': 'Print (counter). Would you believe it? This is an amazing print counter, except the TEXT SHOULD WRAP.',
                        'type': 'rectangle',
                        'positionX': 200,
                        'positionY': 390
                    }
            ));
            var shape6 = diagram.addShape(createShape({
                        'textData': 'counter++',
                        'type': 'rectangle',
                        'positionX': 200,
                        'positionY': 590
                    }
            ));
     
            diagram.connect(shape1, shape2);
            diagram.connect(shape2, shape3);
            diagram.connect(shape3.getConnector('Right'), shape4.getConnector('Top'), {
                points: [
                    new kendo.dataviz.diagram.Point(650, 215)
                ]
            });
            diagram.connect(shape3.getConnector('Left'), shape5.getConnector('Top'), {
                points: [
                    new kendo.dataviz.diagram.Point(250, 215)
                ]
            });
            diagram.connect(shape5, shape6);
            diagram.connect(shape6.getConnector('Bottom'), shape3.getConnector('Bottom'), {
                points: [
                    new kendo.dataviz.diagram.Point(250, 470),
                    new kendo.dataviz.diagram.Point(450, 470)
                ]
            });
        });
    </script>
    </body>
    </html>
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1941 posts

    Posted 27 Apr Link to this post

    Hello Matt,

    The reason why the shapes are rectangles is because a rectangle is created and added to the layout in the shapeDefaults.visual function. Please refer to the article for more information about the shapes that are available out of the box. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top