Hi there,
I'm wondering if there is a way to auto-size all grid columns when we export to Excel using the $.ig.GridExcelExporter() javascript libraries.
I can see a "defaultColumnWidth" setting, but nothing to indicate we can auto-size the column. I know i can set the igniteUI grids to auto-size by using a "*" as the defined column width, but that doesn't seem to work on export.
Hello Andrew,
Thank you for posting in our community!
I have been looking into your question and an approach I could suggest is using the exportEnding event which gives a reference to the Excel worksheet. Then, you could use the columns and autoFitWidth methods in order to auto size the exported columns.
$.ig.GridExcelExporter.exportGrid( $("#grid"), { fileName: "igGrid", }, { exportEnding: function (event, args) { args.worksheet.columns(0).autoFitWidth(); args.worksheet.columns(1).autoFitWidth(); ... }, } );
Here could be found a small sample demonstrating my suggestion.
Please test this approach on your side and let me know if you need any further assistance regarding this matter.
Looking forward to your reply.
Sincerely, Riva Ivanova Software Developer
Hi Riva,
For me that didn't work. I'm not too sure why though, when i click the download link, it's like the browser doesn't respond. I don't see any errors in the developer tools console, so i'm not really sure what to do with it.
These are my javascript references:
<script src="">cdn-na.infragistics.com/.../script> <script src="">cdn-na.infragistics.com/.../script> <script src="">cdn-na.infragistics.com/.../script> <script src="">cdn-na.infragistics.com/.../script> <script src="">cdn-na.infragistics.com/.../script> <script src="">cdn-na.infragistics.com/.../script> <script src="">igniteui.com/.../script> <script src="">igniteui.com/.../script>
Here's the export code:
var exp = new $.ig.GridExcelExporter();
var exportfile = "excelFileExample";
exp.exportGrid($("#grid1"), { gridStyling: "none", worksheetName: sheetName, tableStyle: "TableStyleMedium9", fileName: exportfile, columnsToSkip: ["NotificationId", "ViewMessage", "MessageText"], gridFeatureOptions: { "sorting": "applied", "summaries": "applied", "hiding": "none" } }, { exportEnding: function (e, args) { //args.worksheetcolumns().item(9).width(3000) args.worksheet.defaultRowHeight(500); args.worksheet.defaultColumnWidth(7500); args.worksheet.columns(8).autoFitWidth(); }, });
The other question related to this would be how to change the font size, color and cell colors of the summary row. I'm not sure how to access the summary row in the exportEnding method. The documentation is either hard to find, or not available.