Vue Common - Object Structures - PdfExportDataGridProps - loadPanel

Configures the load panel.

Type:

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>
    );
}