Edit this page

Make Diagram Take All Available Space

Environment

Created with version 2017.3 913
Product Progress Kendo UI Diagram

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

Give article feedback

Tell us how we can improve this article

close
Dummy