Change Shape Visual Template Dynamically

AUTHOR: Veselina Raykova

DATE POSTED: October 08, 2018

DESCRIPTION

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: http://dojo.telerik.com/UJizAfOr/3

 

SOLUTION

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

       group.append(circle);

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

       group.append(rect);

       return group;

   }
   
   
   
2. Attach a handler to the Diagram’s client-side OnClick event (and change the Visual Template of the clicked shape by redrawing the shape with the new options:
   
   <telerik:RadDiagram ID="diagram1" runat="server">

       <LayoutSettings Enabled="true"></LayoutSettings>

       <ClientEvents OnClick="OnShapeClick" />

       ...

   </telerik:RadDiagram>
   function OnShapeClick(args) {

       var shape = args.item;

    

       if (shape instanceof kendo.dataviz.diagram.Shape) {

           shape.redraw({ visual: my_circle });

           shape.redrawVisual();

       }

   }

 

SEE ALSO

RadDiagram Client-side Events

RadDiagram Visual Templates

kendo.dataviz.diagram.Shape

Kendo Dataviz shape.redraw()

 

Files