Change color of shapes dynamicaly

[Alex]

Hello all,

I tried to change the color of the shapes by code, but I tried 10 different things and non of them are working.
The diagramm has a visualTemplate! Without this template it works.

The color is "blue" for all shapes, and is not changing!!

Here are the code snippet! Everything is experimental so do not comment the code ^^

 var diagram = $("#diagram").kendoDiagram().data("kendoDiagram");

  

    var visualTemplate = function(options) {
        var dataviz = kendo.dataviz,
        dataItem = options.dataItem;

        var g = new dataviz.diagram.Group({
            autoSize: true
        });

        g.append(new dataviz.diagram.Rectangle({
            width: SHAPE_WIDTH,
            height: SHAPE_HEIGHT,
            background: "blue"
        }));

        g.append(new dataviz.diagram.TextBlock({
            text: dataItem.title,
            x: 40,
            y: 110,
            color: "#fff",
            fontSize: 52
        }));
        return g;
    };

    var data = [{
        title: "Folienabsauger",
        colorScheme: "#1696d3"
}];

        var thediagramm = $("#diagram").kendoDiagram({
            dataSource: new kendo.data.HierarchicalDataSource({
                data: data
            }),
            shapeDefaults: {
                visual: visualTemplate
            }
        });

        var diagram = $("#diagram").data("kendoDiagram");
      

        var dataItem = diagram.dataSource.insert(0, {
            title: "TEST!" + i,
            colorScheme: "#FF0000"
        });

      
        var curRow = 0;
        var curCol = 0;

        var diagram2 = $("#diagram").getKendoDiagram();

        for (var i = 0; i < diagram.shapes.length; i++) {
            curRow = Math.floor(i / ROWS);
            curCol = i % COL;
            prevShape = diagram.shapes[i - 1];
            shape = diagram.shapes[i];
            shape.position({ x: X_OFFSET + SHAPE_WIDTH * curCol + X_Seperator * curCol, y: Y_OFFSET + SHAPE_HEIGHT * curRow + Y_Seperator * curRow });
            var options = {
                background: "#00FF00",
                stroke: {
                    color: "#00FF00",
                    width: 12
                },
                visual: []
            }
            shape.options.dataItem.colorScheme = "red";
            shape.redraw(options);
            diagram2.shapes[0].options.visual = [];
        }

[Alex]

Here are a workaround:

shape = model.getDiagramm().shapes[n];

$(shape.shapeVisual.domElement).find(

"rect"

).attr(

"fill"

,"red");​​

 

With best regards,
Alex​​​​