Customize grid pdf border

[Bill Naples]

There appears to be a single border style configuration for left, right, top, and bototm:

https://ej2.syncfusion.com/vue/documentation/api/grid/pdfThemeStyle/

Is it possible to turn off left/right border, and only keep top/bottom border? That is, I'd like to match the pdf border styling to the default html border styling as shown at the following link:

https://ej2.syncfusion.com/vue/documentation/grid/pdf-export/pdf-cell-style-customization/

Preview the first grid, and then export to pdf. Compare the html and pdf grids. Th

[Joseph Christ Nithin Issack]

Hi Bill,

  Greetings from Syncfusion support.

Currently we are validating your query, we will provide further details on or before 9^th August, 2022. We appreciate your patience until then.

Regards,

Joseph I.

[Vinitha Balasubramanian]

Hi Bill,

Thanks for your patience.

Query : Customize grid pdf border

We have analyzed your query, you want turn off left/right border while performing pdf exporting the Grid. We have achieved your requirement using pdfQueryCellInfo event.

On that event, we have changed default width of the Grid columns using pdf borders method and apply the changed width to the each cell of the Grid component.

Kindly refer the below code and sample for your references.

[App.Vue]

 

pdfQueryCellInfo(args) {

      if (

        args.column.field == "OrderID" ||

        args.column.field == "CustomerID" ||

        args.column.field == "ShipAddress" ||

        args.column.field == "EmployeeID"

      ) {

        let leftrightpdfborders = new PdfBorders();

        leftrightpdfborders.right.width = 0;

        leftrightpdfborders.left.width = 0;

 

        args.cell.style = { borders: leftrightpdfborders };

        args.cell.style = { borders: leftrightpdfborders };

 

        if (args.column.field == "OrderID") {

          let rightpdfborders = new PdfBorders();

          rightpdfborders.right.width = 0;

          args.cell.style = { borders: rightpdfborders };

        }

        if (args.column.field == "EmployeeID") {

          let leftpdfborders = new PdfBorders();

          leftpdfborders.left.width = 0;

          args.cell.style = { borders: leftpdfborders };

        }

      }

    }

Sample link : https://codesandbox.io/s/vue-template-forked-tb2x4f

API reference : https://ej2.syncfusion.com/vue/documentation/api/grid/#pdfquerycellinfo

Please get back to us if you need further assistance

Regards,

Vinitha Balasubramanian

[Bill Naples]

Thanks. What about the header row cells? Setting style border from pdfHeaderQueryCellInfo seems to have no effect.

And also how do you clear border on aggre

[Vinitha Balasubramanian]

Hi Bill,

Thanks for your update

Currently we have prepared a sample based on your last update, facing some complexities to achieve your requirement.

We will update further details on 01/09/2022. Until then, we appreciate your patience.

Regards,

Vinitha Balasubramanian  

[Bill Naples]

Thank you Vinitha.

[Vinitha Balasubramanian]

Hi Bill,

We are sorry for the inconvenience.

Since we are facing some difficulties on the sample to achieve your requirement while performing PDF export action, we will update the further details on or before Sep 5^th, 2022. Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Johnson Soundararajan S]

Hi Bill Naples,

We reviewed your query. We understand that you want to customize the border styles in the columns header. So we tried to achieve the requirement by doing some customization in the sample when you click the Pdf Export button in the grid’s toolbar.

Please refer to the below sample and code snippet for more information.

Code sample :

App.vue

 

 

    CustomPDF: function () {

      let document: PdfDocument = new PdfDocument();

 

      //Add a page.

      let page1: PdfPage = document.pages.add();

      let pdfGrid: PdfGrid = new PdfGrid();

 

      //Add columns

      pdfGrid.columns.add(4);

 

      //Add headers

      pdfGrid.headers.add(1);

 

      let leftrightborders = new PdfBorders();

      leftrightborders.right.width = 0;

      leftrightborders.left.width = 0;

      let leftborders = new PdfBorders();

      leftborders.left.width = 0;

      let rightborders = new PdfBorders();

      rightborders.right.width = 0;

 

      let header: PdfGridRow = pdfGrid.headers.getHeader(0);

      // Add the header value and borders styles

      header.cells.getCell(0).value = 'Order ID';

      header.cells.getCell(0).style.borders = rightborders;

      header.cells.getCell(1).value = 'Customer ID';

      header.cells.getCell(1).style.borders = leftrightborders;

      header.cells.getCell(2).value = 'Ship Address';

      header.cells.getCell(2).style.borders = leftrightborders;

      header.cells.getCell(3).value = 'Employee ID';

      header.cells.getCell(3).style.borders = leftborders;

 

      let pdfGridRow1: PdfGridRow;

      for (var i = 0; i < this.data.length; i++) {

        // Add the new rows and set the data

        pdfGridRow1 = pdfGrid.rows.addRow();

        pdfGridRow1.cells.getCell(0).value = this.data[i].OrderID.toString();

        pdfGridRow1.cells.getCell(0).style.borders = rightborders;

        pdfGridRow1.cells.getCell(1).value = this.data[i].CustomerID;

        pdfGridRow1.cells.getCell(1).style.borders = leftrightborders;

        pdfGridRow1.cells.getCell(2).value = this.data[i].ShipAddress;

        pdfGridRow1.cells.getCell(2).style.borders = leftrightborders;

        pdfGridRow1.cells.getCell(3).value = this.data[i].EmployeeID.toString();

        pdfGridRow1.cells.getCell(3).style.borders = leftborders;

      }

 

      // drawing a grid

      pdfGrid.draw(page1, new PointF(10, 10));

 

      // save the document

      document.save('Output.pdf');

 

      // destroy the document

      document.destroy();

    },

 

Sample : Rfcim2 (forked) - StackBlitz

Screenshot :
 

Please get back to us, if you need further assistance.

Regards,

Johnson Soundararajan S