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
    JavaScript
    <div id="deferRendering">
        <!-- Widget content -->
    </div>
    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
    JavaScript
    <dx-defer-rendering
        [renderWhen]="modelReady"
    }">
        <!-- Widget content -->
    </dx-defer-rendering>
    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
    JavaScript
    <div ng-controller="DemoController">
        <div dx-defer-rendering="{
            renderWhen: modelIsReady
        }">
            <!-- Widget content -->
        </div>
    </div>
    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
    JavaScript
    <div data-bind="dxDeferRendering: {
        renderWhen: modelIsReady
    }">
        <!-- Widget content -->
    </div>
    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.