DevExtreme DataGrid & TreeList – Angular, React, Vue, and jQuery

In this blog post, I’ll summarize recently introduced DataGrid and TreeList features/capabilities and briefly describe implementation details.

Should you have any questions about the features/capabilities outlined in this post, please submit a support ticket via the DevExpress Support Center.

Export to PDF (v22.1)

To enable our Data Grid’s PDF export option, import the jsPDF library. Within the component, set the export.enabled property to true and specify export formats. The latter action displays the Export button within the DataGrid. When clicked, this button fires the dataGrid.onExporting function (wherein you should call the pdfExporter.exportDataGrid(options) method).

<dx-data-grid ... 
    (onExporting)="onExporting($event)" 
> 
    <dxo-export 
        [enabled]="true" 
        [formats]="['pdf']" 
    ></dxo-export> 
</dx-data-grid> 

import { Component } from '@angular/core';  
import { exportDataGrid } from 'devextreme/pdf_exporter'; 
import { jsPDF } from 'jspdf'; 
  
// ... 
  
export class AppComponent {  
    onExporting(e) { 
        const doc = new jsPDF(); 
        exportDataGrid({ 
            jsPDFDocument: doc, 
            component: e.component, 
        }).then(() => { 
        doc.save('DataGrid.pdf'); 
    }); 
  } 
}  

View Demo

Cell Customization

You can customize cell content and draw custom cells within a PDF document.

The customizeCell function allows you to customize the appearance of individual DataGrid cells for the exported PDF document (for example, you can change the font style used for cells).

onExporting(e) { 
    const doc = new jsPDF(); 
    exportDataGrid({ 
        jsPDFDocument: doc, 
        component: e.component,  
        customizeCell({ gridCell, pdfCell }) { 
            //... 
       } 
    }).then(() => { 
        doc.save('DataGrid.pdf'); 
    }); 
} 

If you wish to override default painting logic and apply your own when drawing a cell, use the customDrawCell function. In the example below, this function draws and customizes a cell in a PDF document for the “Website” column:

onExporting(e) { 
    const doc = new jsPDF(); 
    exportDataGrid({ 
        jsPDFDocument: doc, 
        component: e.component,  
        customDrawCell({ gridCell, pdfCell }) { 
            //... 
        } 
    }).then(() => { 
        doc.save('DataGrid.pdf'); 
    }); 
} 

View Demo

Header and Footer

You can easily add a header and a footer to your exported DataGrid.

The DataGrid component locates the header before the point specified in the PdfExportDataGridProps.topLeft property.

For the footer position, use the customDrawCell function. This function allows you to calculate the coordinates of the right-most cell of the component.

View Demo

Export Images

The jsPDF library API also allows you to export custom content to PDF (such as images). For image export, you can call the jsPDF.addImage method and then handle the onRowExporting event to customize rows for the exported DataGrid.

onExporting(e) { 
    const doc = new jsPDF(); 
    exportDataGrid({ 
        jsPDFDocument: doc, 
        component: e.component,  
        onRowExporting: (e) => { 
            // Customize rows 
        }, 
       customDrawCell: (e) => { 
            // Detect picture cell 
            doc.addImage(e.gridCell.value, 'PNG', e.rect.x, e.rect.y, e.rect.w, e.rect.h); 
            e.cancel = true; 
        } 
    }).then(() => { 
        doc.save('DataGrid.pdf'); 
    }); 
} 

View Demo

Export Multiple Grids

To export multiple DataGrid components into a single file and arrange them across different pages of your PDF document, use the pdfExporter.exportDataGrid(options) method in a chain of Promises.

exportGrids() { 
    const doc = new jsPDF(); 
    DevExpress.pdfExporter.exportDataGrid({ 
        jsPDFDocument: doc, 
        component: gridOneInstance, 
    }).then(() => { 
        doc.addPage(); 
        DevExpress.pdfExporter.exportDataGrid({ 
            jsPDFDocument: doc, 
            component: gridTwoInstance, 
        }).then(() => { 
            doc.save('MultipleGrids.pdf'); 
        }); 
    }); 
} 

View Demo

Control New Row Position (v21.2)

This feature allows you to control new row position within the DataGrid. When users click Add a row or press the “plus” button, an empty row field will appear at the specified position. Six predefined modes can be assigned to the newRowPosition property:

• "first"/"last" - Insert a new row at the beginning/end of the dataset. 
• "pageTop"/"pageBottom" - Insert a new row at the top/bottom of the current page. 

• "viewportTop"/"viewportBottom" - Insert a new row at the top/bottom of the viewport. 

import React from 'react'; 
import DataGrid, { Editing } from 'devextreme-react/data-grid'; 
 
function App() { 
    return ( 
        <DataGrid ...> 
            <Editing 
                newRowPosition="pageBottom" 
            /> 
        </DataGrid> 
    ); 
} 
 
export default App; 

If you wish to position new records in a more flexible manner, you can specify the key before/after which a new record must be inserted. To introduce this option, specify the insertBeforeKey or insertAfterKey property in the pending changes array.>

View Demo

Improved Search Functionality (v21.2)

We reduced false-positive matches when users search for numbers within the DataGrid and TreeList's search panel. Consider the following usage scenario: your DataGrid includes cells with “4” and “40”. Previously, if you searched for “40”, both cells would be highlighted. Now, “4” doesn’t appear as part of the search result.

You can test this functionality in the following demo:

View Demo

Reworked Virtual Scrolling (v21.2)

Our DataGrid’s virtual scrolling engine was reworked in v21.2. First, we optimized row rendering algorithms to increase overall FPS.

Second, we optimized data loading algorithms to reduce the number of remote data requests. You can also render rows synchronously or asynchronously – simply use the scrolling.renderAsync property.

View Demo

How can we better serve your Angular, React, Vue, jQuery development needs? Is there a DataGrid-related feature you’d like us to introduce in future release cycles?