This is a migrated thread and some comments may be shown as answers.

Add Group/TextBlock

7 Answers 281 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
JonathanElsner
Top achievements
Rank 1
JonathanElsner asked on 23 Jul 2014, 06:42 PM
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.

7 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 25 Jul 2014, 02:01 PM
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!
 
0
Tony
Top achievements
Rank 1
answered on 31 Jul 2014, 08:03 PM
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.
0
T. Tsonev
Telerik team
answered on 04 Aug 2014, 09:04 AM
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!
 
0
Tony
Top achievements
Rank 1
answered on 04 Aug 2014, 03:14 PM
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);
}
}
});



0
T. Tsonev
Telerik team
answered on 06 Aug 2014, 01:56 PM
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!
 
0
Tony
Top achievements
Rank 1
answered on 06 Aug 2014, 08:10 PM
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.
0
T. Tsonev
Telerik team
answered on 08 Aug 2014, 12:15 PM
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!
 
Tags
Diagram
Asked by
JonathanElsner
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Tony
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or