DevExtreme React - Overview
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.
In the following example, the List widget is populated with remote data. While this data is being loaded, the DeferRendering widget displays a loading indicator. Note that the DeferRendering requires its renderWhen option to be set to a Promise (jQuery or native). The content of the DeferRendering will be shown once this Promise is resolved.
- <div data-options="dxView: { name: 'Products', title: 'Products' }">
- <div data-options="dxContent: { targetPlaceholder: 'content' }" data-bind="dxDeferRendering: {
- showLoadIndicator: true,
- renderWhen: isReady
- }">
- <div data-bind="dxList: {
- dataSource: productList
- }"></div>
- </div>
- </div>
- MyApp.Products = function(params, viewInfo) {
- var isReady = $.Deferred();
- return {
- isReady: isReady.promise(),
- productList: db.Products,
- viewShown: function() {
- productList.load().done(function() {
- isReady.resolve();
- });
- }
- };
- };
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.