Interface control DevExtreme PivotGrid, has a new HTML coding experience!

Although DevExtreme has just released v23.1, today we will continue to summarize some important features related to the DevExtreme PivotGrid (perspective grid) component released in the previous major update (v22.2).

DevExtreme has a collection of high-performance HTML5/JavaScript widgets that allow you to leverage modern web development stacks (including React, Angular, ASP.NET Core, jQuery, Knockout, etc.) to build interactive web applications. From Angular and React, to ASP.NET Core or Vue, DevExtreme includes a comprehensive collection of high-performance and responsive UI widgets for use in traditional web and next-generation mobile applications. The suite comes with a fully functional data grid, interactive chart widgets, data editor, and more.

DevExtreme v23.1 official version download (Q technical exchange: 523159565)

Field Selector - Encoded HTML

Sometimes users may find it necessary to render custom HTML markup in the Field Chooser element (such as displaying a value as a link), in DevExtreme v22.2 you can configure how parse HTML markup is parsed in the header filter of the PivotGridFieldChooser component , this feature is  implemented through the new encodeHtml Boolean property. This property is enabled by default (to prevent potential security holes, such as XSS attacks), and in its disabled state, all markup is converted to markup. If you disable this attribute, make sure the HTML content is safe.

The following code snippet demonstrates the use of this property:

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

Export Fields panel title

DevExtreme  v22.2 allows you to export PivotGrid (perspective grid) data and field panel titles to Excel, this combination required workarounds before. In v22.2, you can use attributes in the exportPivotGrid method to select which fields panel headers to export.

The following code snippet demonstrates the use of these properties:

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