Edit this page

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 via 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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy