DevExtreme PivotGrid (v22.2) — Export Field Panel Headers and Encode HTML (Angular, React, Vue, jQuery)

Though we just released v23.1, we wanted to briefly highlight a few important features introduced in our last major release cycle – capabilities our DevExtreme PivotGrid users may find of value. If you have any questions regarding the features outlined herein, feel free to submit a support ticket via the DevExpress Support Center.

If you have not used the DevExtreme PivotGrid in the past, please review the getting started section of our online help system: Pivot Grid.

Export Field Panel Headers

v22.2 allows you to export PivotGrid data and field panel headers to Excel. Previously, this combination required workarounds. With v22.2, you can select field panel headers to export by using the properties in the exportPivotGrid method.

View Demo

The following code snippet illustrates the use of these properties:

await exportPivotGrid({ 
      // ... 
      exportDataFieldHeaders: true, 
      exportRowFieldHeaders: true, 
      exportColumnFieldHeaders: true, 
      exportFilterFieldHeaders: true, 
})

Field Chooser - Encode HTML

At times, you may find it necessary to render custom HTML markup in Field Chooser elements (such as displaying values as links). With v22.2, you can configure how HTML tags are parsed in the header filter of the PivotGridFieldChooser component. This capability is made available through our new encodeHtml Boolean property. This property is enabled by default (to prevent potential security vulnerabilities, such as XSS attacks). In the disabled state, all tags are converted to markup. If you disable this property, please make certain that your HTML content is safe.

The following code snippet illustrates use of this property: 

<dx-pivot-grid-field-chooser  ...
    [encodeHtml]=“true” 
> 
</dx-pivot-grid-field-chooser>

For more information on security considerations and use of the encodeHtml property, please refer to the following help topic: Security Considerations.