DeferRendering

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

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

  • jQuery
    Use the dxDeferRendering jQuery plug-in.

    HTML
    <div id="deferRendering">
    </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
    }">
    </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
    }">
    </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 and Globalize libraries 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.

Show Example:
jQuery

Configuration

An object defining configuration options for the widget.

Events

This section describes events fired by this widget.