Split text in a Shape and reflow

5 posts, 0 answers
  1. François
    François avatar
    5 posts
    Member since:
    Jan 2012

    Posted 20 Mar Link to this post

    Hello,
    I use the following code to format the text if it is too long.

    function createShape(options) {
        var shapeOptions = {
            editable: false,
            selectable: false,
            id: options.id,
            x: options.positionX || 0,
            y: options.positionY || 0,
            width: options.width || 200,
            height: options.height || 50,
            type: options.type,
            path: options.path || undefined,
            content: {
                text: options.textData || undefined,
                color: '#fff',
                fontSize: 15
            },
            fill: options.fillColor || '#0088CC',
            stroke: options.strokeColor || '#0088CC',
        };
       
        var shape = new kendo.dataviz.diagram.Shape(shapeOptions);
        var texts = options.textData.split(" ");
        for (var i = 0; i < texts.length; i++) {
            shape.visual.append(new kendo.dataviz.diagram.TextBlock({
                text: texts[i],
                color: "#fff"
            }));
        }
        shape.visual.reflow();
        
        return shape;
    }

    I would like to be able to use the method : reflow() afterwards; so that the words of the text place this correctly.  Can you tell me how to do that? Thank you for your help.


  2. Stefan
    Admin
    Stefan avatar
    1660 posts

    Posted 22 Mar Link to this post

    Hello, François,

    Thank you for the provided code.

    I can assume that it is based on the how-to example:

    https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/text-wrapping#wrap-text

    Could please advise the issue caused by this approach as it is looking good on our end?

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. François
    François avatar
    5 posts
    Member since:
    Jan 2012

    Posted 23 Mar in reply to Stefan Link to this post

    thank you for your answer.

    I've attached to you what I get with my code. How can I get the text formatted in a row. I don't use layouts to create shapes.I use the code I gave you as an example

    Regards.

  4. Stefan
    Admin
    Stefan avatar
    1660 posts

    Posted 26 Mar Link to this post

    Hello, François,

    Thank you for the details.

    Please have in mind that the layout is needed in this case.

    I modify the example to use a combination of both approached:

    https://dojo.telerik.com/UvECoSIm

    If this approach has limitations in the real application, please share more details on that.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. François
    François avatar
    5 posts
    Member since:
    Jan 2012

    Posted 27 Mar in reply to Stefan Link to this post

    Thank you it works perfectly.
Back to Top