DeferRendering

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.

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

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

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

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.

Configuration

An object defining configuration options for the widget.

Name Description
animation

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

hiddenUntilRendered

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

onRendered

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

onShown

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

renderWhen

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

showLoadIndicator

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

staggerItemSelector

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