Adjust Column Width with CSS

Adjust Column Width with CSS

Posted by: johnny.su on 25 August 2020, 3:12 am EST

• 

  johnny.su

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 August 2020, 3:12 am EST - Updated 3 October 2022, 3:44 pm EST

  I’m trying to change the column width to only fit one character using css but it leaves a blank space between the columns. Please see attachment. Is there a way to give rid of it?

  Template:
  
  <wj-flex-grid-column *ngFor=“let col of columns”
  
  [binding]=“col[‘binding’]”
  
  [wordWrap]=“true”>
  
  <ng-template wjFlexGridCellTemplate class=“header” [cellType]=“‘ColumnHeader’” let-cell=“cell”>
  
  {{cell.col.index + 1}}
  
  
  
  

  CSS:
  
  .wj-cell {
  
  padding: 0;
  
  border: none !important;
  
  width: 8px !important;
  
  text-align: center;
  
  }

  

• 

  johnny.su

  • Post Options:
  • Link
    Copy

  Posted 25 August 2020, 4:32 pm EST - Updated 3 October 2022, 3:44 pm EST

  Actually fixed it by setting the width attribute on the column component instead of css.

  <wj-flex-grid-column *ngFor=“let col of columns”
  
  [binding]=“col[‘binding’]”
  
  [width]=“8”
  
  [wordWrap]=“true”>

  But it messes up the PDF export. Please see attached.

  

  707×147 29.9 KB

  Is there a way to export/print the grid as is?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 August 2020, 7:30 am EST

  Hi Johnny,

  We are glad that you were able to resolve the width issue.

  Yes, you can export the grid with the same width. Please refer to the sample links below that demonstrates how to export the grid in various formats:

  Excel: https://www.grapecity.com/wijmo/demos/Grid/ImportExportPrint/Excel/Async/angular
  
  PDF: https://www.grapecity.com/wijmo/demos/Grid/ImportExportPrint/PDF/ExportToFile/angular
  
  Print: https://www.grapecity.com/wijmo/demos/Grid/ImportExportPrint/Print/angular

  Regards,
  
  Ashwin

• 

  johnny.su

  • Post Options:
  • Link
    Copy

  Posted 26 August 2020, 11:52 am EST - Updated 3 October 2022, 3:44 pm EST

  Hi Ashwin,

  I think I know why it’s exporting my grid the way it is. I removed the cell borders and cell padding with css but the PDF export are not aware and kept those so the columns all look squished. Please see attachment for what the grid looks like rendered on my screen with the css changes.

  CSS:
  
  .abi-message-viewer .wj-cell {
  
  padding: 0;
  
  border: none !important;
  
  text-align: center;
  
  }

  

  Is it possible to add those css to the PDF export too?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 August 2020, 2:38 am EST

  Hi Johnny,

  The pdf converter does not know about the CSS applied. You can use the formatItem callback while exporting the grid to apply the style to the cells. Please refer to the demo link below:

  https://www.grapecity.com/wijmo/demos/Grid/ImportExportPrint/PDF/CustomCellContent/angular

  In this demo, observe how the formatItem event is used to draw images. Similarly, you can also perform other functions like canceling the rendering of borders. Refer to the link below for the complete API:

  https://www.grapecity.com/wijmo/api/classes/wijmo_grid_pdf.pdfformatitemeventargs.html

  ~regards

• 

  johnny.su

  • Post Options:
  • Link
    Copy

  Posted 27 August 2020, 12:19 pm EST

  HI Ashwin,

  Thanks for linking those examples. I was able to use the formatItem callback to set the cancelBorders property. Doesn’t look exactly like what we have rendered on the page but close enough.

  Thanks for your help!

  Regards,
  
  Johnny