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

5 posts, 0 answers
  1. Itai
    Itai avatar
    33 posts
    Member since:
    Feb 2016

    Posted 13 Mar Link to this post

    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>

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Itai
    Itai avatar
    33 posts
    Member since:
    Feb 2016

    Posted 14 Mar in reply to Daniel Link to this post

    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? 

  5. Itai
    Itai avatar
    33 posts
    Member since:
    Feb 2016

    Posted 14 Mar in reply to Itai Link to this post

    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.  
  6. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 15 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready