11 Answers, 1 is accepted
I would suggest you to review the help topic below which elaborates on the scenario you want to achieve and how it could be done:
Custom Shapes and Connectors
Hope this helps.
Regards,
Vessy
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.


I can probably create my images as SVG if that helps, that link you posted just talks about custom shapes not using images such as png
You can define a shape template that includes image elements and path elements as described in the following help article: http://www.telerik.com/help/aspnet-ajax/diagram-shape-templates.html.
Since the example in the help article only shows the approach for creating a shape template and does not include the mentioned elements I have added an example that demonstrates how they can be used.
Regards,
Slav
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

<script>
function diagram_load(diagram, args) {
var element = diagram.get_element();
$telerik.$(element).kendoDropTarget({
drop: function (e) {
var draggable = e.draggable,
element = e.dropTarget,
diagram = element.getKendoDiagram();
if (draggable && draggable.hint) {
var dataviz = kendo.dataviz;
var group = new dataviz.diagram.Group({
autoSize: true
});
var path = new dataviz.diagram.Path({
data: "M43.51,0.50 L86.50,74.50 L0.50,74.50 z"
});
group.append(path);
var image = new dataviz.diagram.Image({
source: "images/barcelona.jpg",
x: 25,
y: 30,
width: 38,
height: 38
});
group.append(image);
diagram.addShape(group);
}
}
});
}
function getDiagram() { return $find("<%= theDiagram.ClientID %>").kendoWidget; }
</script>

<script>
function diagram_load(diagram, args) {
var element = diagram.get_element();
$telerik.$(element).kendoDropTarget({
drop: function (e) {
var draggable = e.draggable,
element = e.dropTarget,
diagram = element.getKendoDiagram();
if (draggable && draggable.hint) {
var item = draggable.hint.data("data"),
offset = draggable.hintOffset,
point = new kendo.dataviz.diagram.Point(offset.left, offset.top),
transformed = diagram.documentToModel(point);
item.x = transformed.x;
item.y = transformed.y;
var shape = new kendo.dataviz.diagram.Shape(item);
var image = new kendo.dataviz.diagram.Image({
source: "/shapes/shape-1.png",
x: 0,
y: 0,
width: 119,
height: 73
});
shape.visual.append(image);
//diagram.addShape(item);
diagram.addShape(shape);
}
}
});
}
function getDiagram() { return $find("<%= theDiagram.ClientID %>").kendoWidget; }
</script>
The visual templates of the RadDiagram shapes are methods and they are not serialized. This is why the image is not stored in the exported JSON.
Alternatively you can try setting a custom value of the Type property of each shape, depending on the image inside. When the diagram is loaded from JSON, you could apply a visual template with different image after checking the type of the shape, similarly to the approach that is used in the overview demo: http://demos.telerik.com/aspnet-ajax/diagram/examples/overview/defaultcs.aspx
Regards,
Slav
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Regards,
Ather
This effect is achieved via PointsCollections, which are explained in the following help article: http://www.telerik.com/help/aspnet-ajax/diagram-shapes-connections.html
You can check them in action in the source of the Overview demo of RadDiagram that is visible in your screenshot: http://demos.telerik.com/aspnet-ajax/diagram/examples/overview/defaultcs.aspx
Regards,
Slav
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Hi folks,
I'd like to build up more complex shapes in Diagram using multiple svg elements (paths/fills) - is it possible to do this via a group?
Cheers,
G
Yes, it is possible via the RadDiagram visual templates functionality. You can find details on how to use them along with sample code snippets here: http://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/functionality/shape-templates
Regards,
Vessy
Telerik