Search code examples
javascriptdevexpressdevextremejszip

Apply background-color to dxDataGrid control and export to Excel

I'm using DevExpress's dxDataGrid in a ASP.NET project for show some data stored on a SQL Server database.

The following code shows how I'm setting the dxDataGrid control for render the data:

// Variables.
var vlrMin = [];     
var vlrMax = [];     
var vlr_to_match = 0;
var colors = [];     
var final_rst = "";

// Add values to variables:
vlrMin.push("9");
vlrMin.push("2");
vlrMin.push("9");

// Add values to variables:
vlrMax.push("13");
vlrMax.push("7");
vlrMax.push("4");

colors.push('#ff0000');
colors.push('#92D050');
colors.push('#5B9BD5');

// Start configuration.
$("#gridContainer").dxDataGrid({
    dataSource: [{
        "Dept": "Local services",
        "Employee": "John Doe",
        "TotalHours": "11"
    }],
    paging: {
        pageSize: 10
    },
    export: {
        allowExportSelectedData: true,
        enabled: true,
        fileName: 'Reporte 1',
        texts: {
            exportAll: 'Export all',
            exportSelectedRows: 'Export selected row(s).',
            exportTo: 'Export'
        },
    },
    searchPanel: {
        visible: true
    },
    filterRow: {
        visible: true,
        showOperationChooser: true
    },
    allowColumnReordering: true,
    grouping: {
        autoExpandAll: true
    },
    groupPanel: {
        visible: true
    },
    pager: {
        showPageSizeSelector: true,
        allowedPageSizes: [5, 10, 20],
        showInfo: true
    },
    columns: ['Dept',
        'Employee', {
            dataField: 'TotalHours',
            allowFiltering: true,
            allowSorting: true,
            cellTemplate: function(container, options) {
                /* Value to check if matches with the criteria. */
                var vlr_to_match = options.value;

                /* Loop elements. */
                for (var mn = 0; mn < vlrMin.length; mn++) {
                    if (vlr_to_match >= vlrMin[mn] && vlr_to_match <= vlrMax[mn]) {
                        final_rst = colors[mn];
                        break;
                    }
                }

                /* Apply custom style to element. */
                $('<span>').text(options.data.TotalHours)
                    .attr('style', 'background-color: ' + final_rst)
                    .appendTo(container);
            }
        }
    ]
});

This is the results in the dxDataGrid control:

Results from dxDataGrdi control

But, when I open the generated file "using the DevExpress functionality" I'm not getting the same results as is shown in the screenshot (i.e; the cell has values, but no styles are applied).

According to the documentation, and after apply a color to an specific cell in the dxDataGrid control, when the exported Excel file is opened, the cell is not getting the same result as is shown in the dxDataGrid control.

My question is:

  • How can apply styles to a dxDataGrid cell and apply such results to the generated Excel file?
Solution

  • unfortunately, based on the quite recent (2016-09-20) reply from DX stuff in their support forum, there is no way in DevExtreme suit to export dxDataGrid to excel with formatting.

    See yourself: https://www.devexpress.com/Support/Center/Question/Details/T429240

    If you were using the DevEpress ASPxGridView control together with ASPxGridViewExporter you would be able to customize format in the exported Excel doc per cell or per row.