Export Issue with Grouped Grid due to checkboxes and Custom Widgets

[taauntik]

Forum Post

When exporting group data, we encountered an issue where the group row header is exported as an empty string in the output file. This issue occurs when using:

1. Checkbox
2. Widget
3. CustomWidget

This is the example where we tested this, https://bryntum.com/products/grid/examples/exporttoexcel/

import { DataGenerator, XlsProviderBase, Grid, Toast, Column,ColumnStore } from '../../build/grid.module.js?481612';
import shared from '../_shared/shared.module.js?481612';

const typeMap = {
    string  : String,
    number  : Number,
    date    : Date,
    boolean : Boolean,
    bool    : Boolean
};

class CustomWidgetColumn extends Column {
    static $name = 'CustomWidgetColumn';

static type = 'CustomWidget';

onCellClick({
    grid,
    record,
    target
}) {
    console.log("test");
}
}

// Register Column
ColumnStore.registerColumnType(CustomWidgetColumn);


// This is a custom provider class which uses more styling on cells based on certain conditions
class CustomExcelFileProvider extends XlsProviderBase {
    // This method is called by the exporter feature to write the file
    static write({ filename, columns, rows }) {
        rows.forEach(row => {
            row.forEach(cell => {
                // Convert cell type as library expects it
                cell.type = typeMap[cell.type] || String;

            if (cell.type === String && typeof cell.value !== 'string') {
                cell.value = `${cell.value}`;
            }

            if (cell.type === Number) {
                const index = columns.findIndex(col => col.field === 'firstName');

                // Style cells based on value
                if (cell.value < 30) {
                    cell.backgroundColor = '#FFFF00';

                    // Style the name cell in the same row
                    if (index !== -1) {
                        row[index].fontWeight = 'bold';
                    }
                }
                else if (cell.value > 70) {
                    cell.backgroundColor = '#FF0000';

                    if (index !== -1) {
                        row[index].fontStyle = 'italic';
                    }
                }
            }
        });
    });

    // Columns are just the first line of the data containing column headers
    columns.map(cell => {
        // Delete type, header is always text
        delete cell.type;
        delete cell.field;
        // Style the header cell
        cell.fontWeight = 'bold';
        cell.align = 'center';
    });

    globalThis.writeXlsxFile(
        // data starts with array of header and is followed by the actual data
        [columns, ...rows],
        {
            dateFormat : 'yyyy-mm-dd',
            fileName   : filename,
            columns    : columns.map(cell => {
                return {
                    // write-excel-file library expects width in characters, we receive with in pixels
                    width : Math.round((cell.width || 100) / 10)
                };
            })
        }
    );
}
}

const grid = new Grid({

appendTo : 'container',

 selectionMode: {
    multiSelect: true, // Enable multiple row selection
    dragSelect: true,
    selectOnKeyboardNavigation: true,
    deselectOnClick: true,
    row: false, //Prevent selection of row and marking the checkbox as selected when clicked anywhere on the row except the checkbox
    checkbox: {
        // These configs are applied to the checkbox selection column
        id: 'checkbox_all',
        checkCls: 'b-my-checkbox',
        align: 'center',
        hidden: false,
        hideable: false, // Set to false to prevent the user from hiding the column
        resizable: false,
        groupable: false,
        filterable: false,
        exportable: false
    },
    showCheckAll: true
},
features : {
    excelExporter : {
        // disable date format to keep date instance
        dateFormat  : null,
        xlsProvider : CustomExcelFileProvider
    }
},

// Headers will ripple on tap in Material theme
ripple : {
    delegate : '.b-grid-header'
},

columns : [
{
    id: 'stop_watch',
    cls: 'text-center hidden-xs',
    flex: 3,
    type: 'widget',
    align: 'center',
    text: '',
    icon: 'fa-thin fa-stopwatch',
    htmlEncode: false,
    cellCls: 'hidden-xs',
    hideable: false, // Set to false to prevent the user from hiding the column
    resizable: false,
    filterable: false,
    groupable: false,
    exportable: false,
    headerRenderer: ({
        column,
        headerElement
    }) => {
        return 'Stop Widget';
    },
    renderer: ({
        record,
        isExport
    }) => {
        var rendererConfig = {};

        rendererConfig['html'] =
            ``;

        return rendererConfig;
    }
},
{
    id: 'start_time',
    cls: 'text-center hidden-xs timerHeader',
    flex: 5,
    align: 'center',
    type: 'CustomWidget',
    text: 'Start custom widget',
    icon: 'glyphicon glyphicon-play',
    htmlEncode: false,
    cellCls: 'hidden-xs',
    hideable: true, // Set to false to prevent the user from hiding the column
    resizable: false,
    filterable: false,
    groupable: false,
    sortable: false,
    exportable: false,
    renderer: ({
        record
    }) => {
        var html_content = "";

        html_content = ``;

        return html_content;
    }
},

{
    text   : 'Name',
    field  : 'name',
    flex   : 2,
    editor : {
        type     : 'textfield',
        required : true
    }
}, {
    text  : 'Age',
    field : 'age',
    width : 100,
    type  : 'number'
}, {
    text  : 'City',
    field : 'city',
    flex  : 1
}, {
    text  : 'Start',
    field : 'start',
    flex  : 1,
    type  : 'date'
}, {
    text  : 'Food',
    field : 'food',
    flex  : 1
}, {
    text     : 'Color (not sortable)',
    field    : 'color',
    flex     : 1,
    sortable : false,
    renderer({ cellElement, value, isExport }) {
        // During export cellElement might be missing
        if (!isExport) {
            // renderer that sets text color = text
            cellElement.style.color = value;
        }
        return value;
    }
}],

data : DataGenerator.generateData(50),

tbar : [
    {
        type     : 'button',
        text     : 'Export (default settings)',
        icon     : 'b-fa b-fa-file-excel',
        ref      : 'excelExportBtn1',
        onAction : () => grid.features.excelExporter.export()
    },
    {
        type     : 'button',
        text     : 'Export (custom columns)',
        icon     : 'b-fa b-fa-file-excel',
        ref      : 'excelExportBtn2',
        onAction : () => grid.features.excelExporter.export({
            exporterConfig : {
                columns : [
                    { text : 'First Name', field : 'firstName', width : 90 },
                    { text : 'Age', field : 'age', width : 40 },
                    { text : 'Starts', field : 'start', width : 140 },
                    { text : 'Ends', field : 'finish', width : 140 }
                ]
            }
        })
    },
    {
        type     : 'button',
        text     : 'Export to CSV',
        icon     : 'b-fa b-fa-file-csv',
        ref      : 'excelExportBtn3',
        onAction : () => grid.features.excelExporter.export({
            csv : {
                delimiter : ','
            }
        })
    }
]
});

Screenshots: