Centering Text in Rectangle Group

5 posts, 0 answers
  1. Gregg
    Gregg avatar
    13 posts
    Member since:
    Sep 2015

    Posted 25 Jun Link to this post

    The following code to generate some rectangles with text items (see attached).  What do I need to do to center each text item in its rectangle?  I see there's a Layout, but I'm not sure how to combine rectangles, paths and groups into on of those.

     

    var vLines = [5, 90, 175, 260, 345, 430, 515, 600];
    var vLines = [5, 90, 175, 260, 345, 430, 515, 600];
     
    ...
     
    $.each(vLines, function (index, value) {
        var group = getBox("line " + count++, "line " + count++, "line " + count++);
        group.transform(geom.transform().translate(10, value));
        surface.draw(group);
    });
     
    ....
     
    function getBox(text1, text2, text3) {
     
        var lineColor = "#9999b6";
        var lineWidth = 2;
        var fontNormal = "12px Arial";
     
        var group = new draw.Group();
        var rect = new geom.Rect([0, 0], [160, 75]);
        var path = draw.Path.fromRect(rect, { stroke: { color: lineColor, width: lineWidth } });
        group.append(path);
     
        if (text1) {
            group.append(new draw.Text(text1, new geom.Point(10, 10), { font: fontNormal }));
        }
     
        if (text2) {
            group.append(new draw.Text(text2, new geom.Point(10, 30), { font: fontNormal }));
        }
     
        if (text3) {
            group.append(new draw.Text(text3, new geom.Point(10, 50), { font: fontNormal }));
        }
                 
        return group;
    }

     

     

    Thanks

  2. Gregg
    Gregg avatar
    13 posts
    Member since:
    Sep 2015

    Posted 25 Jun in reply to Gregg Link to this post

    So I guess maybe my first question should have been what is the best way to create a flowchart in Kendo UI for jQuery (see attached)?.  This isn't a flowchart that the user creates interactively, but it is dynamic based on the results of running some server code (mostly the text items).

    Is it better to use the Drawing API, the DataViz Diagram functionality, or something else?

    Thanks, Gregg

     

     

  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2342 posts

    Posted 27 Jun Link to this post

    Hi Gregg,

    For creating a flowchart you can utilize the Kendo Diagram widget. We have a how-to article that describes how this functionality can be implemented. Check it out below and let me know how it works for you.

    https://docs.telerik.com/kendo-ui/knowledge-base/diagram-create-flowchart


    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Gregg
    Gregg avatar
    13 posts
    Member since:
    Sep 2015

    Posted 27 Jun in reply to Viktor Tachev Link to this post

    Hi Viktor,

    That would work nicely, but I was wondering if it's possible to have multiple lines of text within a symbol (via something like <br />, or \n\r)?

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    729 posts

    Posted 01 Jul Link to this post

    Hello, Gregg,

    We have a how-to article which shows how to achieve textwrapping here.

    The approach is to append a number of TextBlocks in the same layout:



    https://dojo.telerik.com/UrEfIfOY/5

    var group = new diagram.Group();
     
     group.append(new diagram.Rectangle({
       width: 300,
       height: 60,
       stroke: {
         width: 0
       },
       fill: "#e8eff7"
     }));
     
     
     var layout = new diagram.Layout(new diagram.Rect(15, 0, 60, 60), {
       alignContent: "center",
       spacing: 4
     });
     
     group.append(layout);
     
     var texts = dataItem.text.split(" ");
     for (var i = 0; i < texts.length; i++) {         
       layout.append(new diagram.TextBlock({
         text: texts[i]   
       }));
     }
     
     layout.reflow();

    Let us know if you need further assistance.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top