
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.
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
0
Hi JonathanElsner,
In this case you need to add a diagram.shape element with children textBlock.
Regards,
Hristo Germanov
Telerik
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
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
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);
}
}
});
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
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
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.
http://dojo.telerik.com/oHiq
After I drop an item on the canvas, it cannot be moved.
0
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
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!