UI Widgets DeferRendering

A container for elements that must be rendered at a specified moment.

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

The DeferRendering widget is an element whose content is rendered only when the renderWhen option returns a resolved jQuery.Promise. While waiting for the moment when content can be rendered, a loading indicator can be displayed. To render widget content, the animation specified by the animation option will be performed.

You can create a 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.

Show Example:
jQuery
<div data-bind="dxDeferRendering: {
    showLoadIndicator: true,
    staggerItemSelector: '.dx-list-item',
    animation: 'stagger-3d-drop',
    renderWhen: modelIsReady
}">
    <div id="myList" style="margin: 10px;" data-bind="dxList: {
        dataSource: listDataSource
    }">
        <div class="listItem" data-options="dxTemplate:{ name:'item' }">
            <div style="display:inline-block; margin: 5px;">
                <img style="margin:5px;" data-bind="attr: { src: $root.getImagePath(name) }" />
            </div>
            <div style="display:inline-block; margin: 5px;">
                <p style="font-size:larger;"><b data-bind="text: name"></b></p>
                <p>Capital: <i data-bind="text: capital"></i></p>
            </div>
        </div>
    </div>
</div>
var modelIsReady = $.Deferred();

//Loads json data and passes it to the DataSource
var getData = function () {
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            myViewModel.listDataSource.store().insert(data[i]);
        }
        myViewModel.listDataSource.load().done(function () {
            modelIsReady.resolve();
        });

    }, "json");
};

setTimeout(getData, 3000);

var myViewModel = {
    listDataSource: new DevExpress.data.DataSource({ store: [], paginate: false }),
    getImagePath: function (name) {
        if (name === undefined)
            return;
        return "/Content/images/doc/16_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
    },
    modelIsReady: modelIsReady.promise()
};

ko.applyBindings(myViewModel);
body{
  text-align: center;
}
#myList{
    height: 70%;
}
.listItem {
  text-align: left;
  padding: 5px;
}

Configuration

An object defining configuration options for the widget.

Events

This section describes events fired by this widget.