Highlight Selected Shapes in Diagram

Environment

Product Progress Kendo UI Diagram

Description

How can I change the color of shapes in the Diagram when the user performs selection?

Solution

  1. Use a custom shape visual that sets a different color to the shape on condition that it is currently selected.

      function visualTemplate(data) {
          var diagram = kendo.dataviz.diagram;
          var g = new diagram.Group({
              autoSize: true
          });
    
          var r = new diagram.Rectangle({
              width : 100,
              height: 80,
              fill: this.isSelected ? "limegreen" : data.fill.color
          });
          g.append(r);
    
          return g;
      }
    

    The shape visual is applied through the shapeDefaults.visual property.

  2. Handle the select event and trigger a redraw of the Diagram shapes.

      select: function(e) {
          var shapes = this.shapes;
          for(var i = 0; i < shapes.length; i++){
              shapes[i].redrawVisual();
          }
      }
    

The following example demonstrates how to change the background of the selected shapes in the Diagram to green.

    <div id="diagram"></div>
    <script>
      $("#diagram").kendoDiagram({
        selectable: {
          key: "shift"
        },
        shapes: [{
          id: "1",
          content: {
            text: "Monday"
          },
          x: 100,
          y: 100
        }, {
          id: "2",
          content: {
            text: "Tuesday"
          },
          x: 250,
          y: 100
        }, {
          id: "3",
          content: {
            text: "Wednesday"
          },
          x: 350,
          y: 250
        }],
        connections: [{
          from: "1",
          to: "2"
        },{
          from: "2",
          to: "3"
        }],
        connectionDefaults: {
          endCap: "ArrowEnd"
        },
        shapeDefaults: {
          visual: visualTemplate
        },
        select: function(e){
          var shapes = this.shapes;
          for(var i = 0; i < shapes.length; i++){
            shapes[i].redrawVisual();
          }
        }
      });
      function visualTemplate(data) {
        var diagram = kendo.dataviz.diagram;
        var g = new diagram.Group({
          autoSize: true
        });

        var r = new diagram.Rectangle({
          width : 100,
          height: 80,
          fill: this.isSelected ? "limegreen" : data.fill.color
        });
        g.append(r);

        return g;
      }
    </script>
In this article
Not finding the help you need? Improve this article