Add Group/TextBlock

8 posts, 0 answers
  1. JonathanElsner
    JonathanElsner avatar
    20 posts
    Member since:
    Feb 2004

    Posted 23 Jul 2014 Link to this post

    Is there any way via the api to add a group or textBlock?

    I see in the samples how to create a group as below when using a datasource, but using the api I can't find anything.
    shapeDefaults: {
    visual: visualTemplate
    }

    Also directly adding a textBlock via the api, is it possible?  Something like below would be nice.
    var tb = new dataviz.diagram.TextBlock({
                text: "Sample text",
                x: 10,
                y: 10,
                color: "red",
                fontSize:30
            });
            
    diagram.addShape(tb)?

    Thanks.
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 25 Jul 2014 Link to this post

    Hi JonathanElsner,

    In this case you need to add a diagram.shape element with children textBlock.

    var shape = new kendo.dataviz.diagram.Shape({ type: "rectangle", x: 10, y: 10, width: 200, height: 200 });
    shape.append(...);
    diagram.addShape(shape);

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Tony
    Tony avatar
    3 posts
    Member since:
    Apr 2014

    Posted 31 Jul 2014 in reply to Hristo Germanov Link to this post

    I tried this and it does not work.  There is no append method on the Shape object.  Please see the link you provided to the shape documentation.
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 04 Aug 2014 Link to this post

    Hi,

    The correct syntax is to append the TextBlock to the shape visual:
    shape.visual.append(tb);

    -- Live demo --

    We're in the process of revising the widget documentation and we'll include this information there.
    Apologies for the caused inconvenience.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Tony
    Tony avatar
    3 posts
    Member since:
    Apr 2014

    Posted 04 Aug 2014 in reply to T. Tsonev Link to this post

    Thanks.  That seemed to fix the issue somewhat.  I tried modifying your sample app (http://demos.telerik.com/kendo-ui/html5-diagram-sample-app) to allow dropping of groups on the canvas.  The shape is dropped on the canvas successfully, but when I try to drag the new shape around, I get the errors.  The error and my code for the drop event below:

    TypeError: shape.stroke is undefined
    http://localhost:52352/diagram
    Line 630

    TypeError: this.startPoint is undefined
    http://localhost:52352/Scripts/kendo/2014.2.716/kendo.all.min.js
    Line 57



    ​ $("#diagram").kendoDropTarget({
    drop: function (e) {
    var item, pos, transformed;
    if (e.draggable.hint) {
    item = e.draggable.hint.data("shape");
    pos = e.draggable.hintOffset;
    pos = new Point(pos.left, pos.top);
    var transformed = diagram.documentToModel(pos);
    item.x = transformed.x;
    item.y = transformed.y;


    var shape = new kendo.dataviz.diagram.Shape(item);

    var tb = new kendo.dataviz.diagram.TextBlock({
    text: "Sample text",
    x: 10,
    y: 10,
    color: "red",
    fontSize: 30
    });

    shape.visual.append(tb);


    diagram.addShape(shape);
    }
    }
    });



  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 06 Aug 2014 Link to this post

    Hello,

    This appears to work for me in test project - http://dojo.telerik.com/@tsvetomir/IwOd/4

    Perhaps I'm missing something?

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Tony
    Tony avatar
    3 posts
    Member since:
    Apr 2014

    Posted 06 Aug 2014 in reply to T. Tsonev Link to this post

    Here is your sample app pasted into the dojo with your code added to the drag and drop handler:

    http://dojo.telerik.com/oHiq

    After I drop an item on the canvas, it cannot be moved.
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 08 Aug 2014 Link to this post

    Hello,

    The error is caused by the demo code, more specifically the updateShapeProperties function.
    It tries to read the various properties which are not defined for this shape.

    Cleaning up this function seems to fix this: http://dojo.telerik.com/@tsvetomir/OkuQ

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready