I'm trying to follow the basic excel export example at: http://www.igniteui.com/grid/export-basic-grid
I've followed the sample exactly but when i try to export, i get the error as follows:Uncaught ReferenceError: saveAs is not defined(anonymous function) @ infragistics.gridexcelexporter.js:23(anonymous function) @ infragistics.excel.js:26(anonymous function) @ infragistics.documents.core.js:192$c.p @ infragistics.documents.core.js:192$c.w @ infragistics.documents.core.js:192$c.d @ infragistics.documents.core.js:192$c._save @ infragistics.excel.js:26$c.save @ infragistics.excel.js:26(anonymous function) @ infragistics.gridexcelexporter.js:23
All i'm need to do is simply export the grid using this example.
I'm using IgniteUI 2015 Vol. 2 (15.2.20152.2081).
Is there a bug with this version?
thanks,
wvusaf
Hi,
Please make sure you have included the FileSaver and Blob libraries that are required in order for the igGridExcelExporter to work:
<!-- External files for exporting --> <script src="http://www.igniteui.com/js/external/FileSaver.js"></script> <script src="http://www.igniteui.com/js/external/Blob.js"></script>
Please let me know if including those fixed the issue.
I did not have those files included. I also do not see them in the IgniteUI installation folder.
Where are those files located?
Thanks for your clarification on the headers and footers. I also think these options in the ig.excel.PrintOptions are the ones you look for. Using the igGridExcelExporter does not prvent you from using the excel library to customize the workbook.
Actually this is what the igGridExcelExporter does - it creates a workbook using the excel library and save the file on the local machine. It provides options to customize a lot of things on the worksheet, however you may go further in customizing by using the excel library. You can do this on some of the events exposed - for example the exportEnding event.
$.ig.GridExcelExporter.exportGrid($("#grid"), { fileName: "igGrid" }, { exportEnding: function(sender, args) { args.worksheet.printOptions().header() = "text to print in the header"
args.worksheet.printOptions().footer() = "text to print in the footer" }});
You can check the other settings exposed in printOptions at the API documentation page. Please let me know if you have further questions on the matter, I will be glad to help.
The Header and Footer technically belong to PageSetup under WorksheetOptions, if you were to look at an Excel document saved as .xml.
What we used to do is generate xml in the format of an Excel document but i would like to use the GridExcelExporter, if possible.
I do see in the ig.excel.PrintOptions, that there is a header and footer there. this is probably what i need, but when using ig.excel, i am disconnected from using GridExcelExporter, aren't I?
If i can somehow modify ig.excel.PrintOptions for use with the GridExcelExporter, then i think it would work. Can this be done?
Technically, when GridExcelExporter exports a document, it does freeze the top row, which must control the FreezePanes section that is also located under WorksheetOptions in the actual document, so it must have access to that same area that contains the Header and Footer.
For setting properties - please see the ig.excel.DocumentProperties methods, which include properties that can be viewed by right-clicking the workbook's XLS file and viewing the properties. These include various tags that describe the content of the workbook such as the author, title, and subject of the workbook.
However headers and footer are not document properties. Actually I am not quite sure what header and footer properties you mean. If you just want to style and format some row as a header or footer, then you will need to do this manually via the excel library. This would require inserting new row above the already available, or use any row via its index. A sample code that will give you an idea of the process:
1) Writing values to cells in a given row:
var row = worksheet.rows(rIndex); for (var cIndex = 0; cIndex < 5; cIndex++) { row.setCellValue(cIndex, "value"); }
2) You can then merge those cells into one that can act as a header.
3) Setting formatting:
var format = row.getCellFormat(0);format.fill($.ig.excel.CellFill.createLinearGradientFill(45, '#FF0000', '#00FFFF'));
More details on using the javascript Excel library can be found at http://www.igniteui.com/help/javascript-excel-library-overview
Please let me know if you would need further assistance on the matter.
Yes, i figured that using the remote datasource was causing the issue.
thank you for the solution. however, i have another issue.
is it possible to set document properties using the GridExcelExporter?
specifically, i need to set the Header and Footer properties of the document itself, for times that we might print the document that we've downloaded.
i do see in the Excel object model that you can set the properties, but i hoped i could set them using the GridExcelExporter in some way.
This is the expected, since when using remote dataSource scenario the controllers sends to the client only the data for the current page. In order to export all pages in this situation you will need to workaround the situation by
1) fetching the entire data using an ajax call
2) pass this data to the exorter in the exportStarting event. Here is the code snippet:
*************
function ExportGrid() { var url = '@Url.Action(actionName: "GetItems")'; // this is your data source controller action var gridAllData = []; // 1) start the ajax call $.ajax({ url: url,
method: "GET",
dataType: "json", success: function (data) { $.ig.GridExcelExporter.exportGrid($("#report-grid"), { fileName: "igGrid", gridFeatureOptions: { "sorting": "applied" }, }, { exportStarting: function (args) { // 2) pass the fetched data args._gridData = data.Records; } });
}, error: function (jqXhr, textStatus, errorThrown) { console.log(errorThrown); } }); }
************
Please let me know if you have further questions on the matter.