jQuery UI Widgets › Forums › Grid › Change Header Name in Export to Excel
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.
-
Author
-
Hi,
I need to change my column header text in export to excel. Could you please help to resolve this issue.Thank You.
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,
NadezhdajQWidgets team
http://www.jqwidgets.com/Thank You Nadezhda.
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.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,
DimitarjQWidgets team
http://www.jqwidgets.com/hi Dimitar
that works thank you 🙂
but i will probably try another way to have my dataBest Regards
-
AuthorPosts
You must be logged in to reply to this topic.