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

DevExtreme Team Blog
28 June 2023

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 using an older version of DevExtreme (v22.1 and lower), follow these instructions to upgrade to v22.2x.

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.

Pivot Grid with exported headers

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.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.