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.
Thank you for following up!
I have been looking into your question, however, as the provided by me sample uses the same JavaScript file and seems to be working correctly, it is hard to tell what the possible reason for this behavior might be.
Could you please try and modify it in order to demonstrate the behavior on your side?
Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this forum thread.
Having a sample, which I can debug on my side, will be highly appreciated and extremely helpful in further investigating this matter and providing you with a solution as soon as possible.
Additionally, regarding the following:
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.
What I can suggest is using the summaryExporting callback. Then, inside the callback handler, the font size could be set via the height option, the cell text color via the colorInfo option, and the cell background via the fill option.
Please note that the height option sets the font height in twips (1/20th of a point).
Furthermore, I believe that you will find our Applying Styles to Cells topic here quite helpful on the matter.
Here could be found a small sample demonstrating my suggestions.
Please test it on your side and let me know if this is an accurate demonstration of what you are trying to achieve.