All docs
V22.2
22.2
22.1
21.2
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

loadPanel

Configures the load panel.

Type:

Object

The example below calls the exportDataGrid(options) method on a button click. This method enables the load panel and applies shading to the grid.

jQuery
JavaScript
HTML
$(function(){
    $('#exportButton').dxButton({
        // ...
        onClick: function() {
            const doc = new jsPDF();
            DevExpress.pdfExporter.exportDataGrid({
                jsPDFDocument: doc,
                component: dataGrid,
                loadPanel: {
                    enabled: true,
                    shading: true,
                    shadingColor: "#808080"
                }
            }).then(function() {
                doc.save('Customers.pdf');
            });
        }
    });

    const dataGrid = $('#gridContainer').dxDataGrid({
        // ...
    }).dxDataGrid('instance');
});
<head>
    <!-- ... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
    <!-- DevExtreme sources are referenced here -->
</head>
Angular
app.component.html
app.component.ts
app.module.ts
<dx-button ... 
    (onClick)="exportGrid($event)">
</dx-button>

<dx-data-grid ... >
    <!-- ... -->
</dx-data-grid>
import { Component } from '@angular/core';
import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;

    exportGrid() {
        const doc = new jsPDF();
        exportDataGridToPdf({
            jsPDFDocument: doc,
            component: this.dataGrid.instance,
            loadPanel: {
                enabled: true,
                shading: true,
                shadingColor: "#808080"
            }
        }).then(() => {
            doc.save('Customers.pdf');
        })
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule, DxButtonModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule,
        DxButtonModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <div>
        <DxButton ...
            @click="exportGrid()"
        />

        <DxDataGrid ...
            :ref="dataGridRef">
            <!-- ... -->
        </DxDataGrid>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';
import DxButton from 'devextreme-vue/button';
import { jsPDF } from 'jspdf';
import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';

const dataGridRef = 'dataGrid';

export default {
    components: {
        DxDataGrid,
        DxButton
    },
    data() {
        return {
            dataGridRef
        };
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRef].instance;
        }
    },
    methods: {
        exportGrid() {
            const doc = new jsPDF();
            exportDataGridToPdf({
                jsPDFDocument: doc,
                component: this.dataGrid,
                loadPanel: {
                    enabled: true,
                    shading: true,
                    shadingColor: "#808080"
                }
            }).then(() => {
                doc.save('Customers.pdf');
            });
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';
import Button from 'devextreme-react/button';
import { jsPDF } from 'jspdf';
import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';

export default function App() {
    const dataGridRef = useRef(null);

    function exportGrid() {
        const doc = new jsPDF();
        const dataGrid = dataGridRef.current.instance;

        exportDataGridToPdf({
            jsPDFDocument: doc,
            component: dataGrid,
            loadPanel: {
                enabled: true,
                shading: true,
                shadingColor: "#808080"
            }
        }).then(() => {
            doc.save('Customers.pdf');
        });
    }

    return (
        <React.Fragment>
            <div>
                <Button ...
                    onClick={exportGrid}
                />
                <DataGrid ...
                    ref={dataGridRef}
                    >
                    {/* ... */}
                </DataGrid>
            </div>
        </React.Fragment>
    );
}

enabled

Specifies whether the load panel is enabled.

Type:

Boolean

Default Value: true

height

Specifies the height of the load panel in pixels.

Type:

Number

Default Value: 90

indicatorSrc

Specifies a URL pointing to an image to be used as a loading indicator.

Type:

String

Default Value: ''

shading

Specifies whether to shade the UI component when the load panel is shown.

Type:

Boolean

Default Value: false

shadingColor

Specifies the shading color. Applies only if shading is true.

Type:

String

Default Value: ''

This property supports the following colors:

showIndicator

Specifies whether to show the loading indicator.

Type:

Boolean

Default Value: true

showPane

Specifies whether to show the pane of the load panel.

Type:

Boolean

Default Value: true

text

Specifies text displayed on the load panel.

Type:

String

Default Value: 'Exporting...'

width

Specifies the width of the load panel in pixels.

Type:

Number

Default Value: 200