New to Kendo UI for jQueryStart a free 30-day trial

Make Diagram Take All Available Space

Environment

Created with version2017.3 913
ProductProgress® 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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support