A container for elements that must be rendered at a specified moment.

The dxDeferRendering widget is an element whose content is rendered only when the renderWhen option returns a resolved jQuery.Promise. While waiting for the moment when content can be rendered, a loading indicator can be displayed. To render widget content, the animation specified by the animation option will be performed.

Currently only the Knockout approach is available for use with this widget .

Add a div element and apply the dxDeferRendering binding to this element.

<div data-bind="dxDeferRendering: {
    renderWhen: modelIsReady
    <!--Widget content-->
var modelIsReady = $.Deferred();
//A function in which modelIsReady is resolved
var myViewModel = {
    modelIsReady: modelIsReady.promise()

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. To use the Knockout approach, the Knockout library is also required.

See Also

You can find the detailed information on principles of working with the widget in the dxDeferRendering section of the Individual Widgets article.


An object defining configuration options for the widget.

Name Description

Specifies the animation to be used to show the rendered content.


Indicates if widget markup should be visible until bindings are applied to its children elements.


Specifies a callback function that is called when the widget's content has finished rendering but is not yet shown.


Specifies a callback function that is called when widget content is shown and animation has completed.


Specifies a jQuery.Promise, which upon resolving forces widget content to render.


Indicates if a load indicator should be shown until the widget's content is rendered.


Specifies a jQuery selector of items that should be rendered using a staggered animation.