angularjsangular-ui-gridhierarchicalsubgridpdfmake

Can a subgrid be exported in angular ui-grid


I'm using the grid from http://ui-grid.info/ in a project. I've created a hierarchical grid, which works nicely, but when I do an export, it only exports the data from the top-level grid.

This is by design and is standard functionality for the grid, so there's no point in me putting up any example code. Any example from http://ui-grid.info/docs/#/tutorial will do.

Is there a way to export the subgrid (preferably both the main grid AND the subgrid together as they appear in the grid)?


Solution

  • I managed to get it working, although if I had the time I would do it a bit better than what I've done by actually creating a branch of the code and doing it properly, but given time constraints, what I've got is working nicely.

    FYI, here's the way I ended up getting it to do what I wanted:

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

    I made a copy of exporter.js, named it custom.exporter.js and changed my reference to point to the 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 it just returns the rows object without all the stuff that gets the columns and so on. For now, I'm coding it to work with a known set of columns, so I don't need all that.

    I modified the pdfExport function to be 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();
                  }
              }