UI Widgets 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.

Show Example:
jQuery
<div data-bind="dxDeferRendering: {
    showLoadIndicator: true,
    staggerItemSelector: '.dx-list-item',
    animation: 'stagger-3d-drop',
    renderWhen: modelIsReady
}">
    <div id="myList" style="margin: 10px;" data-bind="dxList: {
        dataSource: listDataSource
    }">
        <div class="listItem" data-options="dxTemplate:{ name:'item' }">
            <div style="display:inline-block; margin: 5px;">
                <img style="margin:5px;" data-bind="attr: { src: $root.getImagePath(name) }" />
            </div>
            <div style="display:inline-block; margin: 5px;">
                <p style="font-size:larger;"><b data-bind="text: name"></b></p>
                <p>Capital: <i data-bind="text: capital"></i></p>
            </div>
        </div>
    </div>
</div>
var modelIsReady = $.Deferred();

//Loads json data and passes it to the DataSource
var getData = function () {
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            myViewModel.listDataSource.store().insert(data[i]);
        }
        myViewModel.listDataSource.load().done(function () {
            modelIsReady.resolve();
        });

    }, "json");
};

setTimeout(getData, 3000);

var myViewModel = {
    listDataSource: new DevExpress.data.DataSource({ store: [], paginate: false }),
    getImagePath: function (name) {
        if (name === undefined)
            return;
        return "/Content/images/doc/15_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
    },
    modelIsReady: modelIsReady.promise()
};

ko.applyBindings(myViewModel);
body{
  text-align: center;
}
#myList{
    height: 70%;
}
.listItem {
  text-align: left;
  padding: 5px;
}

Configuration

An object defining configuration options for the widget.