Make Diagram Take All Available Space

Environment

Created with version	2017.3 913
Product	Progress® Kendo UI® Diagram for jQuery

Description

How can I make the Diagram resize and take all space that is available in the container?

Solution

When the size of the container changes, call the resize() method to adjust the size of the Diagram.

<table style="width: 100%">
    <tr>
        <td width=1>
            <div style="width: 250px;" id="text">
                Here we have some element. When this is hidden the should expand to fill all the available width on the page. Click below
                to hide this text.
            </div>
            <p />
            <h3>
                <a id="toggleButton">Toggle</a>
            </h3>
        </td>
        <td>
            <div>
                <div id="diagram"></div>
            </div>
        </td>
    </tr>
</table>

<script>
    function createDiagram() {
        $("#diagram").kendoDiagram({
            dataSource: {
                data: diagramNodes(),
                schema: {
                    model: {
                        children: "items"
                    }
                }
            },
            layout: {
                type: "tree",
                subtype: "down",
                horizontalSeparation: 30,
                verticalSeparation: 20
            },
            shapeDefaults: {
                width: 40,
                height: 40
            }
        });
    }

    function diagramNodes() {
        var root = { name: "0", items: [] };
        addNodes(root, [3, 2, 2]);
        return [root];
    }

    function addNodes(root, levels) {
        if (levels.length > 0) {
            for (var i = 0; i < levels[0]; i++) {
                var node = { name: "0", items: [] };
                root.items.push(node);

                addNodes(node, levels.slice(1));
            }
        }
    }

    $(document).ready(function () {

        $("#toggleButton").on("click", function () {
            $("#text").toggle();

            $("#diagram").data("kendoDiagram").resize();

        });

        createDiagram();


    });
</script>