DeferRendering

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.

Included in: dx.mobile.js, dx.web.js, dx.viz-web.js, dx.all.js
Export: default

You can create the widget using one of the following approaches.

  • jQuery

    HTML
    <div id="deferRendering">
        <!-- Widget content -->
    </div>
    JavaScript
    var readyToRender = $.Deferred();
    // Here goes a function that resolves the "readyToRender" Deferred object at a specific moment
    // ...
    $(function () {
        $("#deferRendering").dxDeferRendering({
            renderWhen: readyToRender.promise();
        });
    });
  • Angular

    HTML
    <dx-defer-rendering
        [renderWhen]="modelReady"
    }">
        <!-- Widget content -->
    </dx-defer-rendering>
    JavaScript
    var modelIsReady = $.Deferred();
    // Here goes a function that resolves the "readyToRender" Deferred object at a specific moment
    // ...
    export class AppComponent
        modelReady = modelIsReady.promise();
    }
  • AngularJS

    HTML
    <div ng-controller="DemoController">
        <div dx-defer-rendering="{
            renderWhen: modelIsReady
        }">
            <!-- Widget content -->
        </div>
    </div>
    JavaScript
    var modelIsReady = $.Deferred();
    // Here goes a function that resolves the "readyToRender" Deferred object at a specific moment
    // ...
    angular.module('DemoApp', ['dx'])
        .controller("DemoController", function ($scope) {
            $scope.modelIsReady = modelIsReady.promise();
        });
  • Knockout

    HTML
    <div data-bind="dxDeferRendering: {
        renderWhen: modelIsReady
    }">
        <!-- Widget content -->
    </div>
    JavaScript
    var modelIsReady = $.Deferred();
    // Here goes a function that resolves the "readyToRender" Deferred object at a specific moment
    // ...
    var viewModel = {
        modelIsReady: modelIsReady.promise()
    };
    ko.applyBindings(viewModel);

Note that DevExtreme widgets require you to link the jQuery library to your application. To use the Knockout approach, the Knockout library is also required. For detailed information on linking these libraries to your project, refer to the topics in the Installation section.

See Also
Show Example:
jQuery

Configuration

An object defining configuration options for the widget.

Events

This section describes events fired by this widget.