Adding PDF Export

Adding PDF Export

Basic export with TypeScript

Start by going to the xyzGrid.ts file of the table you wish to add this to. Then add the following code to add the PDF button with minimum edits. Just adding these few lines already enables PDF export. :

    //....//
     getButtons() {
            var buttons = super.getButtons();
         
            buttons.push(myProject.Common.PdfExportHelper.createToolButton({
                grid: this,
                onViewSubmit: () => this.onViewSubmit()
            }));

            return buttons;
        }

If you want to try using some more advanced custom features then:

    //....//
    getButtons() {
            var buttons = super.getButtons();

            buttons.push(myProject.Common.PdfExportHelper.createToolButton({
                grid: this,
                onViewSubmit: () => this.onViewSubmit(),
                title: "This is the Title",
                hint: "This is the hint",
                separator: true,
                reportTitle: "This is report title",
                titleTop: 2,
                titleFontSize: 12,
                fileName: "ThisIsTheFileName",
                pageNumbers: true,
                columnTitles: {
                    'OriginalColumn': 'OCol.',
                },               
                tableOptions: {
                     columnStyles: {
                        OriginalColumn: {
                            columnWidth: 25,
                            halign: 'right'
                        }
                    }
                }
            }));

            return buttons;
        }

Explanation of fields

• Grid: takes the current view of the grid (if you hid columns using column picker it ignores them)
• onViewSubmit: action being taken when event occurs
• hint: Caption that appears in the button itself.
• title: Caption that appears as label/name of button when you hover
• separator: Adds a separation line between this button and other buttons on the toolbar.
• reportTitle: The Report Title will appear as the name of the report on the first PDF page and will also be the default name of the file when being downloaded.
• titleTop: How many lines from the top should the title have as a buffer.
• titleFontSize: Controls the font size of the reportTitle field when added to the PDF view,
• fileName: [Unsure]
• pageNumbers: if "true" then page numbers will be added at the end of each page. Example: 1/10
• columnTitles: Allows you to manipulate how the column titles appear on the PDF **See Northwind Product Grid for implementation example
• tableOptions: Allows you to manipulate the visual effects of the table Example: Width **See Northwind Product Grid for implementation example