DevExtreme Vue - Overview

The DeferRendering is a widget that waits for its content to be ready before rendering it. While the content is getting ready, the DeferRendering displays a loading indicator.

NOTE
The DeferRendering widget is designed for applications built using the DevExtreme SPA Framework. Bear in mind that code examples in this section are supposed to be used in the SPA Framework environment.

In the following example, the List widget is populated with remote data. While this data is being loaded, the DeferRendering widget displays a loading indicator. Note that the DeferRendering requires its renderWhen option to be set to a Promise (jQuery or native). The content of the DeferRendering will be shown once this Promise is resolved.

HTML
JavaScript
<div data-options="dxView: { name: 'Products', title: 'Products' }">
    <div data-options="dxContent: { targetPlaceholder: 'content' }" data-bind="dxDeferRendering: {
        showLoadIndicator: true,
        renderWhen: isReady
    }">             
        <div data-bind="dxList: {
            dataSource: productList
        }"></div>
    </div>
</div>
MyApp.Products = function(params, viewInfo) {
    var isReady = $.Deferred();
    return {
        isReady: isReady.promise(),
        productList: db.Products,
        viewShown: function() {
            productList.load().done(function() {
                isReady.resolve();
            });
        }
    };   
};
See Also