Highlight Selected Shapes in Diagram

Environment

Product

Progress® Kendo UI® Diagram for jQuery

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>