New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Change Shape Visual Template Dynamically


In this sample you can see how to change the shape’s Visual Template dynamically (e.g. on a shape click).

You can test the result of the implementation shown below applied to the Kendo Diagram widget here: digram-visual-change 


For this purpose, you will need to:

  1. Implement two visual templates for the shape(s) – one, set initially and another that will be used for the change (my_circle() and my_rect()).
function my_circle(options) {
    var ns = kendo.dataviz.diagram;
    var group = new ns.Group({ autoSize: true });

    var circle = new ns.Circle({ radius: options.width / 2, fill: { color: options.fill.color } });
    return group;
function my_rect(options) {
    var ns = kendo.dataviz.diagram;
    var group = new ns.Group({ autoSize: true });

    var rect = new ns.Rectangle({ height: options.height, width: options.width, fill: options.fill });
    return group;
  1. Attach a handler to the Diagram’s client-side OnClick event (and change the Visual Template of the clicked shape by redrawingthe shapewith the new options:
<telerik:RadDiagram ID="diagram1" runat="server">
    <LayoutSettings Enabled="true"></LayoutSettings>
    <ClientEvents OnClick="OnShapeClick" />
function OnShapeClick(args) {
    var shape = args.item;

    if (shape instanceof kendo.dataviz.diagram.Shape) {
        shape.redraw({ visual: my_circle });

You can download the sample project files from here.


RadDiagram Client-side Events

RadDiagram Visual Templates


Kendo Dataviz shape.redraw()

In this article
Not finding the help you need? Improve this article