Change Header Name in Export to Excel - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: data export, getcolumnproperty, grid, jqxGrid ;, setcolumnproperty, XLS

This topic contains 5 replies, has 4 voices, and was last updated by lebarillier 6 years, 9 months ago.

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

Author

Change Header Name in Export to Excel Posts

April 1, 2015 at 10:09 am Change Header Name in Export to Excel #69421

Prakash

Participant

Hi,
I need to change my column header text in export to excel. Could you please help to resolve this issue.

Thank You.

April 1, 2015 at 10:36 am Change Header Name in Export to Excel #69422

Nadezhda

Participant

Hello Prakash,

You can use ‘setcolumnproperty’ method to change the column header text. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.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/jqxgrid.export.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(100);

            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]                     
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,                
                altrows: true,
                sortable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 130 },
                  { text: 'Last Name', datafield: 'lastname', width: 130 },
                  { text: 'Product', datafield: 'productname', width: 200 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                ]
            });

            $("#excelExport").jqxButton({ theme: theme });
            $("#xmlExport").jqxButton({ theme: theme });
            $("#csvExport").jqxButton({ theme: theme });
            $("#tsvExport").jqxButton({ theme: theme });
            $("#htmlExport").jqxButton({ theme: theme });
            $("#jsonExport").jqxButton({ theme: theme });

            $("#excelExport").click(function () {
                $('#jqxgrid').jqxGrid('setcolumnproperty', 'firstname', 'text', "New header text");
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');           
            });
            $("#xmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
            });
            $("#csvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
            });
            $("#tsvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
            });
            $("#htmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
            });
            $("#jsonExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
            });
        });
    </script>
</head>
<body class='default'>
    <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' />
                <br /><br />
                <input type="button" value="Export to XML" id='xmlExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to CSV" id='csvExport' />
                <br /><br />
                <input type="button" value="Export to TSV" id='tsvExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to HTML" id='htmlExport' />
                <br /><br />
                <input type="button" value="Export to JSON" id='jsonExport' />
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

April 1, 2015 at 10:45 am Change Header Name in Export to Excel #69423

Prakash

Participant

Thank You Nadezhda.

February 22, 2018 at 8:52 am Change Header Name in Export to Excel #98874

lebarillier

Participant

hi! is it possible to change it in a “exportdata”?
i don’t want to change the header in the grid but i have to change it in my JSON.

February 23, 2018 at 5:54 am Change Header Name in Export to Excel #98889

Dimitar

Participant

Hi lebarillier,

Please try the following solution:

var originalHeaderText = $('#jqxgrid').jqxGrid('getcolumnproperty', 'firstname', 'text');
$('#jqxgrid').jqxGrid('setcolumnproperty', 'firstname', 'text', "New header text");
$("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
$('#jqxgrid').jqxGrid('setcolumnproperty', 'firstname', 'text', originalHeaderText);

We hope it is helpful to you.

Best Regards,
Dimitar

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

February 23, 2018 at 3:50 pm Change Header Name in Export to Excel #98898

lebarillier

Participant

hi Dimitar
that works thank you 🙂
but i will probably try another way to have my data

Best Regards

Author

Posts

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

You must be logged in to reply to this topic.