1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Set column width at Grid Export to PDF (and Excel)

Set column width at Grid Export to PDF (and Excel)

Hi support,
how can I set the width of the columns at export to PDF (and Excel)?
Right now the width is automatically set to the same width on every column.
This is not my setting of the column properties in the browser.

TIA,
Stephan

11 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team December 9, 2019 01:02 PM UTC

Hi Stephan, 
 
Greetings from Syncfusion support 
 
Query : Set column width to grid export to PDF. 
 
We have analyzed your query. We suggest to use the PdfHeaderQueryCellInfo event to achieve the requirement. This event will triggered before the data is rendered into the export file. Just give the width for the column directly into that event. 
 
Index.js 
 
var grid = new ej.grids.Grid({ 
        dataSource: window.orderDatas, 
        allowPdfExport: true, 
        toolbar: ['ExcelExport', 'PdfExport'], 
        pageSettings: { pageSize: 7 }, 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID', width: 100, textAlign: 'Center' }, 
            { field: 'CustomerID', headerText: 'Customer ID', width: 100, textAlign: 'Center' }, 
            { field: 'Freiaght', width: 100, format: 'C2', textAlign: 'Center' }, 
            { field: 'ShipCountry', headerText: 'Ship Country', width: 100 , textAlign: 'Center'}, 
        ], 
    }); 
    grid.appendTo('#Grid'); 
 
grid.pdfHeaderQueryCellInfo = function(args){ 
      var len = grid.columns.length; 
        for (let i = 0; i < len; i++) { 
       args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 50;         // Set the column width as 50 
        } 
    } 
 
    grid.toolbarClick = function (args) { 
        if (args.item.id === 'Grid_pdfexport') { 
            grid.pdfExport(); 
           } 
    }; 
 

 
We are currently validating the column width alteration for Excel exported file and we will update the validated detail once got done in our end.. 
 
Regards 
Thavasianand S. 


SS Stephan Schrade December 9, 2019 10:33 PM UTC

Many thanks for your quick reply.
I managed to set the properties with the following code.

grid.pdfHeaderQueryCellInfo = function(args){
args.cell.gridRow.pdfGrid.columns.getColumn(0).width = 180;
args.cell.gridRow.pdfGrid.columns.getColumn(0).textAlign = "Left";
args.cell.gridRow.pdfGrid.columns.getColumn(1).width = 80;
args.cell.gridRow.pdfGrid.columns.getColumn(1).textAlign = "Right";
args.cell.gridRow.pdfGrid.columns.getColumn(2).width = 130;
args.cell.gridRow.pdfGrid.columns.getColumn(2).textAlign = "Left";
args.cell.gridRow.pdfGrid.columns.getColumn(3).width = 200;
args.cell.gridRow.pdfGrid.columns.getColumn(3).textAlign = "Left";
}

But as I'm using the hierarchical grid, I also want to set the properties of the child grid.
I am using this code:

grid.childGrid.pdfHeaderQueryCellInfo = function(args){
args.cell.gridRow.pdfGrid.columns.getColumn(0).width = 100;
       .........

But this does not work. The columns widths of the child grid  are the same as the ones in the parent grid.

Using

childGrid.pdfHeaderQueryCellInfo = function(args){
 
did not work and gives a JS error.

What can I do?

TIA
Stephan




TS Thavasianand Sankaranarayanan Syncfusion Team December 11, 2019 01:34 PM UTC

Hi Stephan, 

Query 1 : Change the column width for Child grid in PDF exported file. 
 
We have analyzed your query and suggest you to use the PdfQueryCellInfo event to achieve the requirement. Here we given the column width of the parent grid and child grid by using the field name of the respective columns. Please follow the below code and sample for more reference. 
 
Index.js 
 
    var grid = new ej.grids.Grid({ 
        allowPdfExport: true, 
        pdfQueryCellInfo : childexport, 
        toolbar: ['PdfExport'], 
        pageSettings: { pageSize: 7 }, 
    columns: [ 
            … 
    ], 
    childGrid: { 
            … 
     }, 
}); 
grid.appendTo('#Grid'); 
 
var parent=true; var child=true; 
      function childexport(args){ 
        if(grid.columns[0].field === args.column.field){ 
          var len = grid.columns.length; 
          for (let i = 0; i < len; i++) { 
         args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 100;      // column width for Parent grid 
          } 
        } 
        if(grid.childGrid.columns[0].field === args.column.field ){ 
          var len = grid.childGrid.columns.length; 
          for (let i = 0; i < len; i++) { 
         args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 75;        // column width for Child grid 
          } 
        } 
    }; 



Query 2 : Change the column width for excel exported file. 

To achieve this requirement we need to go up with the Workbook concept. Here in the GridExport, the parent grid and the child grid structure is taken as a workbook and the column width for both grid is set to it.  

App.component.ts 

toolbarClick(args: ClickEventArgs): void { 
        switch (args.item.text) {           
            case 'Excel Export': 
             const appendExcelExportProperties: ExcelExportProperties = { 
             multipleExport: { type: 'NewSheet' }, 
              hierarchyExportMode: "All" 
      }; 
       const GridExport: Promise<any> = this.grid.excelExport(appendExcelExportProperties, true); 
       GridExport.then((workbook: any) => { 
        var len = workbook.worksheets[0].columns.length; 
        for(var j=0; j<len; j++){ 
           workbook.worksheets[0].columns[j].width = 200;        // here you can set the width  
        }        
       const book: Workbook = new Workbook(workbook, 'xlsx'); 
           book.save('Export.xlsx'); 
        }); 
      } 
    } 



Regards 
Thavasianand S. 


SS Stephan Schrade December 14, 2019 02:32 AM UTC

Hi support,
I have tried your solution for the PDF export.

Unfortunately it is not very robust.
I have set visible = false to my first columns in both grids, because these are my ids which should not be visible to the user.
Therefor columns[0] from your example does not work.
columns[1] does not work either, because in both grids I have the same name for the field.
So I ended up in using columns[3] for my data. 

It is pity, that you have to add so much special code to make the export work.
It would be better, if the settings from the browser grid would be used for the PDF grid as well.

I have another problem with a grouping grid I'm using. There I did customize the template for the group row. 
This is also not used in the PDF export. So I have to add special code there as well. Perhaps I have to make another thread for this in the forum.

Regards,
Stephan





























































TS Thavasianand Sankaranarayanan Syncfusion Team December 16, 2019 01:19 PM UTC

Hi Stephan, 
 
Query : Setting the column width to the grid and child grid by making columns as visibility false, when the pdf exporting.  
 
We have analyzed your query and suggest to use the getVisibleColumns method. In that method, it only fetches the details of visible columns in the grid. But we cannot access this method to child grid property, so need to go up for dynamic methods. On there we have set the column width for those columns which is presented in Grid. Refer below for more reference. 
 
Index.js 
 
ej.base.enableRipple(true); 
 
    var grid = new ej.grids.Grid({ 
        dataSource: window.orderDatas.slice(0,5), 
        allowPdfExport: true, 
        pdfQueryCellInfo : childexport, 
        toolbar: ['PdfExport'], 
        pageSettings: { pageSize: 7 }, 
    columns: [ 
              … 
    ], 
    childGrid: { 
         dataSource: data, 
         queryString: 'OrderID', 
         columns: [ 
             … 
         ], 
     }, 
}); 
grid.appendTo('#Grid'); 
 
function childexport(args){ 
        if(grid.getVisibleColumns()[0].field === args.column.field){          // getVisibleColumns() method fetches the visible columns 
          var len = grid.getVisibleColumns().length; 
          for (let i = 0; i < len; i++) { 
         args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 120; 
          } 
        } 
        for(var j=0; j<grid.childGrid.columns.length; j++){                               // for child grid 
        if(grid.childGrid.columns[j].field === args.column.field ){ 
          var lengths = args.cell.gridRow.pdfGrid.columns.columns.length;  // length of only visible columns 
          for (let i = 0; i < lengths; i++) { 
         args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 75; 
          } 
          } 
 
    grid.toolbarClick = function (args) { 
        if (args.item.id === 'Grid_pdfexport') { 
           var exportProperties = { 
           hierarchyExportMode: "All", 
            
        } 
            grid.pdfExport(exportProperties); 
        } 
    }; 
 


Query : PDF exporting the child grid with grouping function 

Currently we don’t have support to for this combination “PDF export for grouping with hierarchical binding in Grid”. We have logged a feature improvement task for this requirement. We will include this feature in any of our upcoming release.  
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this feedback link:  
 

Regards 
Thavasianand S. 


SS Stephan Schrade December 20, 2019 09:51 AM UTC

Hi support,
many thanks for your answer.

But I don't know why it is so complicated to set different widths for the columns.
Mostly you don't want to have equal widths for every columns so you have to set the width for every column rather than using a for loop.
Why not using the already set values for the visible grid (in the browser).
The visibility setting already comes from there (columns set to not visible are also not visible in the PDF export) so why you don't use the other properties from there as well?
This would make the PDF export much easier.

And for the other issue:
Sorry to cause some confusion, but I don't want to make an export for a grouped hierarchical grid.
I want to export a simple grouped grid. Here I have set a template for the header of the group.
But this is not shown at the PDF export. Here I see the standard header of the group.

Regards,
Stephan

TS Thavasianand Sankaranarayanan Syncfusion Team December 24, 2019 10:03 AM UTC

Hi Stephan, 
 
Query 1 : Using the already Set values for the visible grid. 
 
We have analyzed your query and suggest to use the below format. Here we have taken the width of the visible grid columns, and gives that width value to the PDF exported grid columns. 
 
Index.js 

var grid = new ej.grids.Grid({ 
        dataSource: window.orderDatas.slice(0,5), 
        allowPdfExport: true, 
        allowGrouping: true, 
        groupSettings: { showGroupedColumn: true },     // this allows to add the grouped column for width calculation 
        pdfQueryCellInfo : pdfexport, 
        toolbar: ['PdfExport'], 
    columns: [ 
        { field: 'OrderID', headerText: 'Order ID',visible: false, textAlign: 'Right', width: 120 }, 
        { field: 'CustomerID', headerText: 'CustomerID', width: 30}, 
        { field: 'Freight', headerText: 'Freight', width: 90 }, 
        { field: 'ShipCountry', headerText: 'ShipCountry', width: 130 }, 
    ], 
}); 
grid.appendTo('#Grid'); 

      function pdfexport(args){ 
        var pdfcol = args.cell.gridRow.pdfGrid.columns; 
        var gridcol = grid.getVisibleColumns(); 
         pdfcol.getColumn(0).width = gridcol[0].width; 
         pdfcol.getColumn(1).width = gridcol[1].width; 
         pdfcol.getColumn(2).width = gridcol[2].width;         
      } 





Query 2 : Set a template for the header of that group. 

Unfortunately, we don’t have support for PDF exporting with the header template feature combination in Grid. 

Please get back to us if you need further assistance 
 
Regards 
Thavasianand S.  


SS Stephan Schrade December 29, 2019 05:14 PM UTC

Hi support,
thank you very much.

Thanks for your solution of Query1.

As for Query2, I don't necessarily need a template for the grouping header. It would be okay to set the caption.
Can I use the exportGroupCaption Event for that? And if yes, how can I do so?

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 30, 2019 11:14 AM UTC

Hi Stephan , 

Greetings from Syncfusion support 

Query : Can I use the exportGroupCaption event for adding caption template to the PDF export file. 
 
We have analyzed your query. For adding caption template to the PDF export you don’t need to add the exportGroupCaption event, you can directly add the caption in the group settings, that too reflects in the exported file. Please refer the below sample for more reference. 

Index.js 

    var grid = new ej.grids.Grid({ 
        allowGrouping: true, 
        groupSettings: { showGroupedColumn: true, captionTemplate: '#captiontemplate', columns: ['CustomerID'] }, 
    columns: [ 
              … 
    ], 
}); 
grid.appendTo('#Grid'); 

    grid.toolbarClick = function (args) { 
        if (args.item.id === 'Grid_pdfexport') { 
            grid.pdfExport(); 
        } 
    }; 

Index.html 

<html><head><script src="//ej2.syncfusion.com/javascript/demos/grid/default-exporting/datasource.js" type="text/javascript"></script> 
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> 
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet"> 
    <style> 
          <div class="stackblitz-container material"> 
            <div class="control-section"> 
    <div class="content-wrapper"> 
      <script id="captiontemplate" type="text/x-template"> 
            ${field} - ${key} 
        </script> 
        <div id="Grid"> 
        </div> 
    </div> 
</div> 
</div></body></html> 




Please get back to us if you need further assistance 

Regards, 
Seeni Sakthi Kumar S 


SS Stephan Schrade December 31, 2019 08:29 PM UTC

Hi support,
many thanks for the example.
But this does not work either.
In the browser the grouped caption is "CustomerID - HANAR", but in the PDF file it says "CustomerID: HANAR - 1 item".

Regards,
Stephan

BS Balaji Sekar Syncfusion Team January 6, 2020 11:40 AM UTC

Hi Stephan, 
 
Thanks for your update, 
 
Query : In the browser the grouped caption is "CustomerID - HANAR", but in the PDF file it says "CustomerID: HANAR - 1 item". 
 
We have analyzed your query and suggest to use the “exportGroupCaption” event to achieve the requirement. Here we have used the event to split the caption template values. Please follow the below code snippet for more reference. 
 
Index.js 
 
let grid: Grid = new Grid( 
     { 
         dataSource: data, 
         allowPaging: true, 
         toolbar: ['PdfExport'], 
         allowGrouping: true, 
         groupSettings: { captionTemplate: '#captiontemplate', columns: ['location'] }, 
         allowPdfExport: true, 
         columns: [ 
             { field: 'name', headerText: 'name', textAlign: 'Right', width: 100 }, 
             { field: 'location', headerText: 'location', width: 150  }, 
             { field: 'purchase', headerText: 'purchase', width: 100, textAlign: 'Right'} 
         ], 
 
     }); 
grid.appendTo('#Grid'); 
 
 grid.toolbarClick = (args: ClickEventArgs) => { 
     if (args.item.id === 'Grid_pdfexport') { 
         grid.pdfExport(); 
     } 
}; 
 
grid.exportGroupCaption= (args) => {                           // define exportGroupCaption event 
  args.captionText =args.captionText.split("-")[0]        // this will split the item values in the exported file 
} 
 
 
 
Please get back to us if you need further assistance 
 
Regards 
Balaji Sekar. 


Loader.
Up arrow icon