Add Group/TextBlock

[JonathanElsner]

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.

[Hristo Germanov]

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

 

 

[Tony]

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.

[T. Tsonev]

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

 

 

[Tony]

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);
}
}
});

[T. Tsonev]

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

 

 

[Tony]

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.

[T. Tsonev]

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