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

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.

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

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.

tabIndex

Specifies the widget tab index.

visible

A Boolean value specifying whether or not the widget is visible.

width

Specifies the width of the widget.

Methods

This section describes methods that can be used to manipulate a widget.

Name Description
beginUpdate()

Prevents the component from refreshing until the endUpdate() method is called.

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

element()

Returns the root HTML element of the widget.

endUpdate()

Enables the component to refresh after the beginUpdate() method call.

focus()

Sets focus on the widget.

instance()

Returns an instance of this component class.

off(eventName)

Detaches all event handlers from the specified event.

off(eventName, eventHandler)

Detaches a particular event handler from the specified event.

on(eventName, eventHandler)

Subscribes to a specified event.

on(events)

Subscribes to the specified events.

option()

Returns the configuration options of this component.

option(optionName)

Gets the value of the specified configuration option of this component.

option(optionName, optionValue)

Sets a value to the specified configuration option of this component.

option(options)

Sets one or more options of this component.

registerKeyHandler(key, handler)

Registers a handler when a specified key is pressed.

repaint()

Redraws the widget.

Events

This section describes events fired by this widget.

Name Description
disposing

Fires when the widget is being removed.

initialized

Raised only once, after the widget is initialized.

optionChanged

Fires after an option of the component is changed.

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.