jQuery UI Widgets Forums Grid Excel Export and background color

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Excel Export and background color #48579

    Klaus H
    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

    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/

    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

    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/

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

You must be logged in to reply to this topic.