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

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

  • jQuery
    Use the dxDeferRendering jQuery plug-in.

    HTML
    <div id="deferRendering">
        <!--Widget content-->
    </div>
    JavaScript
    var readyToRender = $.Deferred();
    //A function in which readyToRender is resolved
    //...
    $("#deferRendering").dxDeferRendering({
        renderWhen: readyToRender.promise();
    })
  • Knockout
    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);
  • AngularJS
    Add a div element and apply the dx-defer-rendering directive to this element.

    HTML
    <div dx-defer-rendering="{
        renderWhen: modelIsReady
    }">
        <!--Widget content-->
    </div>
    JavaScript
    var modelIsReady = $.Deferred();
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.modelIsReady = modelIsReady.promise();
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });

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 Installation article.

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.

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 the jQuery.Promise or boolean value, which when resolved, 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.

Events

This section describes events fired by this widget.

Name Description
rendered

Fires when the widget's content has finished rendering but is not yet shown.

shown

Fires when widget content is shown and animation has completed.