CODEWITHSUNDEEP
angular-ui-gridpdfmake
Janbango
Janbango

Reputation: 191

ui-grid pdfMake export layout

I am using pdfMake to export from ui-grid and I am trying to set the layout of the table using exporterPdfTableLayout as decribed in the ui-grid documentation

A tableLayout in pdfMake format, controls gridlines and the like. We use the default layout usually. Defaults to null, which means no layout

I am trying to set the layout using the following line:

exporterPdfTableLayout: 'lightHorizontalLines'

Where 'lightHorizontalLines' is a standard layout provided by pdfMake which I want to use.

I cannot find any examples of this being used or any other documentation on ui-grid for this purpose.

Can someone help with where I am going wrong?

Upvotes: 1

Views: 2345

Answers (3)

Paul Pardi
Paul Pardi

Reputation: 11

You can set the layout using the exporterPdfCustomFormatter and you have to reference the first object in the content array like so:

docDefinition.content[0].layout = {
    hLineWidth: function(i, node) {
       return (i === 0 || i === node.table.body.length) ? 2 : 1;},
    vLineWidth: function(i, node) {
       return (i === 0 || i === node.table.widths.length) ? 2 : 1;},
    hLineColor: function(i, node) {
       return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';},
    vLineColor: function(i, node) {
        return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';}
}

or: 

docDefinition.content[0].layout = 'lightHorizontalLines'

The full property setting looks like this: 

 exporterPdfCustomFormatter: function (docDefinition) {
      docDefinition.content[0].layout = 'lightHorizontalLines'
      return docDefinition;
 }

You can set any layout properties using that pattern. Make sure you reference the sub-property (e.g. 'layout'). If you attempt to set the properties at the content level, you'll overwrite the content object (your table data) which stores the body objects being passed in by ui-grid (or you can set all the content properties like @Gary suggests above).

Upvotes: 1

Gary
Gary

Reputation: 3324

@Janbango also don't forget to update ui-grid.js to include layout: grid.options.exporterPdfTableLayout, into the docDefinition.

      var docDefinition = {
          pageOrientation: grid.options.exporterPdfOrientation,
          pageSize: grid.options.exporterPdfPageSize,
          content: [{
              style: 'tableStyle',
              table: {
                  headerRows: 1,
                  widths: headerWidths,
                  body: allData
              },
              layout: grid.options.exporterPdfTableLayout,
          }],
          styles: {
              tableStyle: grid.options.exporterPdfTableStyle,
              tableHeader: grid.options.exporterPdfTableHeaderStyle
          },
          defaultStyle: grid.options.exporterPdfDefaultStyle
      };

Upvotes: 1

Janbango
Janbango

Reputation: 191

It appears the 

exporterPdfTableLayout:

does not work in ui-grid. I fixed this by editing the 'defaultLayout' directly in the pdfMaker.js file

Upvotes: 1

Related Questions