Excel Export and background color - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Cell, cellclassname, class, color, excel, export, Exportdata, grid, jqxgrid, row, string

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Excel Export and background color Posts

January 29, 2014 at 8:00 am Excel Export and background color #48579

Participant

Hi,

I have stumbled upon a minor problem. I have a grid using cellclassname to give certain columns a background color. Works in the browser alright, but if I export the grid to excel, only the first exported row gets the background color, all other rows stay white. Could you look into that?

Regards
Klaus

January 29, 2014 at 11:07 am Excel Export and background color #48598

Dimitar

Participant

Hello Klaus,

We have tested the following example, based on the demo Cells Styling, using the latest version (3.1.0) of jQWidgets.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };

            var cellclass = function (row, columnfield, value) {
                if (value < 20) {
                    return 'red';
                }
                else if (value >= 20 && value < 50) {
                    return 'yellow';
                }
                else return 'green';
            }

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellclassname: cellclass, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
            });

            $("#excelExport").jqxButton({ theme: theme });
            $("#excelExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid', false);
            });
        });
    </script>
</head>
<body class='default'>
    <style>
        .green
        {
            color: black\9;
            background-color: #b6ff00\9;
        }
        .yellow
        {
            color: black\9;
            background-color: yellow\9;
        }
        .red
        {
            color: black\9;
            background-color: #e83636\9;
        }
        
        .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected)
        {
            color: black;
            background-color: #b6ff00;
        }
        .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected)
        {
            color: black;
            background-color: yellow;
        }
        .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected)
        {
            color: black;
            background-color: #e83636;
        }
    </style>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div style='margin-top: 20px;'>
            <div style='float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />
            </div>
        </div>
</body>
</html>

Every row is exported to Excel as expected – all cells of the Units In Stock column are coloured. Do you experience any issues with the provided example?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 29, 2014 at 3:51 pm Excel Export and background color #48625

Klaus H

Participant

Hello Dimitar,

the example works. I got my case to work as well, the only difference is in the use of cellclassname. If I use a function for cellclassname the excel export works correctly. If you use a string, the excel export only has the background color in the first grid row (you can check by modifying your example). It shouldn’t make a difference in grid usage though? In the browser it works.

Regards
Klaus

January 30, 2014 at 6:51 am Excel Export and background color #48655

Dimitar

Participant

Hi Klaus,

Thank you for your feedback. We confirm the issue with cellclassname set as a string and will fix it as soon as possible.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.