Kendo Diagram Shapes Centered

Question

I'm following the example from the Telerik web site for Basic Usage with the exception of using a Model, children Heirarchy. I just want to be able to list shapes with text boxes and be able to connect them and get the connections later. So far, I'm able to list the shapes and the text boxes, but for some reason all the shapes get centered to the origin of the diagram. I'd like to be able to list the shapes in some order, without connections, then connect them later on on the diagram. Here is the code I have so far:

var data = [{
            firstName: "Antonio",
            lastName: "Moreno",
            title: "Team Lead",
            colorScheme: "#1696d3"
        },
        {
            firstName: "Alfredo",
            lastName: "Morales",
            title: "Team Lead",
            colorScheme: "#1696d3"

        }];

        function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;

            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill: {
                    gradient: {
                        type: "linear",
                        stops: [{
                            color: dataItem.colorScheme,
                            offset: 0,
                            opacity: 0.5
                        }, {
                            color: dataItem.colorScheme,
                            offset: 1,
                            opacity: 1
                        }]
                    }
                }
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.firstName + " " + dataItem.lastName,
                x: 85,
                y: 20,
                fill: "#fff"
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.title,
                x: 85,
                y: 40,
                fill: "#fff"
            }));

            return g;
        }

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

            var diagram = $("#diagram").getKendoDiagram();
            diagram.bringIntoView(diagram.shapes);
        }

        $(document).ready(createDiagram);

Answer 1

I've made some sample: http://dojo.telerik.com/UbECE that makes rectangles one next to another.

I am following this example from API Documentation http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-shapeDefaults.visual

They are using:

$("#diagram").getKendoDiagram().layout();

which works.

Your function will became:

function createDiagram() {
        $("#diagram").kendoDiagram({
            dataSource : data,
            shapeDefaults: {
                visual: visualTemplate
            },
        });

      $("#diagram").getKendoDiagram().layout();
    }