Can't get custom shapes in diagram visualTemplate: "e.drawingContainer is not a function"

[Itai]

I'm trying to get a very simple diagram, with a custom visual for items. I have followed the examples and came up with this snippet: http://dojo.telerik.com/EYaCe/8

The diagram shows nothing, and looking at the console I see an error "e.drawingContainer is not a function" at kendo.min.ui.js. 

Is this a bug, or am I doing something wrong? Replacing "Shape" with "Rectangle" or "Circle" works, but doesn't allow me to set a custom SVG path, obviously. 

 

I also attach the code here, for reference: 

 

<div id="diagram"></div>
  <script>

      $("#diagram").kendoDiagram({
        dataSource: [
          {id: 1, name: "Item 1"},
          {id: 2, name: "Item 2"}
        ],
        shapeDefaults: {
          visual: visualTemplate
        }
      });

      function visualTemplate(options) {
        return new kendo.dataviz.diagram.Shape({
          path: "M 70 0 L 140 30 L 70 60 L 0 30 z",
          width: 140,
          height: 60,
          fill: "red",
          stroke: {
            width: 1,
            color: "black"
          }
        });
      }

  </script>

[Daniel]

Hi,

The visual template should return visual elements like Group, Path, Circle etc. In order to use a custom path you should create a Path element:

function visualTemplate(options) {
    return new kendo.dataviz.diagram.Path({
      data: "M 70 0 L 140 30 L 70 60 L 0 30 z",
      width: 140,
      height: 60,
      fill: "red",
      stroke: {
        width: 1,
        color: "black"
      }
    });
}

Regards,
Daniel
Telerik

 

 

[Itai]

Thank you for the quick reply!

It does work, but there is a different problem now - the fill color is red, but as soon as the mouse pointer moves over the path it reverts to the default orange, and remains orange even when the mouse pointer is no longer over it. 

How can this problem be fixed? 

[Itai]

The stroke is also seems to be lost. So in short - only the shape remains after the pointer hovers over it, and all styling seems to be lost.  

[Daniel]

Hello again,

You can wrap the path in a group in order to avoid changing its style on hover:

function visualTemplate(options) {
    var group = new kendo.dataviz.diagram.Group();
    group.append(new kendo.dataviz.diagram.Path({
      data: "M 70 0 L 140 30 L 70 60 L 0 30 z",
      width: 140,
      height: 60,
      fill: "red",
      stroke: {
        width: 1,
        color: "black"
      }
    }));
    return group;
}

Another option would be to set the shape hover style options to be the same as the ones for the path.

Regards,
Daniel
Telerik