New to Telerik UI for ASP.NET Core? Download free 30-day trial

HTML Structure and DOM Placement

Independently on where it is initialized, the HTML of the Dialog will be appended as a child of the document <body> element.

The following example demonstrates the possible markup and a possible placement of the Dialog component.

    <body>
        <div id="container1">
            @(Html.Kendo().Dialog()
                .Name("dialog")
                .Content("Content of the Dialog")
            )
            ...
        </div>
        <div id="container2">
            ...
        </div>
    </body>
    <body>
        <div id="container1">
            <kendo-dialog name="dialog">
                <content>
                    Content of the Dialog
                </content>
            </kendo-dialog>
            ...
        </div>
        <div id="container2">
            ...
        </div>
    </body>

The following example demonstrates how the markup of the page from the previous example changes after the initialization of the Dialog when the widget is moved to become a child of the <body> and its additional markup (the wrapper and the title bar) is generated.

<body>
    <div id="container1">
        ...
    </div>
    <div id="container2">
        ...
    </div>
    <div class="k-widget k-dialog k-window">
        <div class="k-window-titlebar">...</div>
        <div id="dialog" class="k-content">
            Content of the Dialog
        </div>
    </div>
</body>

See Also

In this article