Is it possible to export subgrid in angular ui-grid

Question

I am using the grid from http://ui-grid.info/ in the project. I created a hierarchical grid that works well, but when I do the export, it only exports data from the top-level grid.

This is by design and is the standard functionality for the grid, so it makes no sense to embed any sample code. Any example from http://ui-grid.info/docs/#/tutorial will do.

Is there a way to export the subseg (preferably both the main grid and the subsection together, as they appear in the grid)?

Answer 1

Unfortunately, the answer is no.

As you can see here , the getData function getData over all rows, and then over all columns, adding the columns to be extractedFields to the extractedFields array and aggregating them in the extractedRows array.

This means that no data other than what is defined in gridOptions ' columnDef will be read, converted, and retrieved.

By design, subgrid information is stored inside the property of any object in the subGridOptions row, but this property never opens inside the exporter function.

The motivation for this behavior is that the extensible grid function is still in the alpha stage, so supporting this in other functions is not an irresistible priority.

Also, adding a subgrid to a CSV can be quite difficult to design if we want to provide a general solution (for example, I don’t even think that it would be compatible with the CSV standard if you had a different number of columns in the main grid and in the subgrids )

However, ui-grid is an open source project, so if you have a working project, feel free to open a discussion about it on the project gitHub page or, better yet, if you can develop a working (and tested) solution and create a transfer request, even better!

Answer 2

I managed to get it to work, although if I had the time, I would have done it a little better than what I did, actually creating a code branch and executing it correctly, but considering the time constraints, it works well for you.

FYI, this is how I ended up doing this to do what I wanted:

In my grid options, I disabled the CSV export options in the grid menu (because I only implemented the changes for the PDF).

I made a copy of exporter.js, named it custom.exporter.js and changed my link to point to a new file.

In custom.exporter.js, I made a copy of the getData function and named it getGridRows. getGridRows is the same as getData, except that it just returns a rows object without any material that gets columns and so on. At the moment, I am encoding it to work with a well-known set of columns, so I do not need this.

I changed the pdfExport function as follows:

 pdfExport: function (grid, rowTypes, colTypes) { var self = this; var exportData = self.getGridRows(grid, rowTypes, colTypes); var docContent = []; $(exportData).each(function () { docContent.push( { table: { headerRows: 1, widths: [70, 80, 150, 180], body: [ [{ text: 'Job Raised', bold: true, fillColor: 'lightgray' }, { text: 'Job Number', bold: true, fillColor: 'lightgray' }, { text: 'Client', bold: true, fillColor: 'lightgray' }, { text: 'Job Title', bold: true, fillColor: 'lightgray' }], [formattedDateTime(this.entity.JobDate,false), this.entity.JobNumber, this.entity.Client, this.entity.JobTitle], ] } }); var subGridContentBody = []; subGridContentBody.push([{ text: 'Defect', bold: true, fillColor: 'lightgray' }, { text: 'Vendor', bold: true, fillColor: 'lightgray' }, { text: 'Status', bold: true, fillColor: 'lightgray' }, { text: 'Sign off', bold: true, fillColor: 'lightgray' }]); $(this.entity.Defects).each(function () { subGridContentBody.push([this.DefectName, this.DefectVendor, this.DefectStatus, '']); }); docContent.push({ table: { headerRows: 1, widths: [159, 150, 50, 121], body: subGridContentBody } }); docContent.push({ text: '', margin: 15 }); }); var docDefinition = { content: docContent } if (self.isIE()) { self.downloadPDF(grid.options.exporterPdfFilename, docDefinition); } else { pdfMake.createPdf(docDefinition).open(); } }