pdfexport with prompt for filename?

[Harvey Kravis]

I am totally impressed by the functionality available for pdfexport.  What would be nice is to have an option to have it prompt for a filename.  Don't want to have to build that myself.  I guess it is easy enough for the user to rename the file after it is downloaded.  Thoughts?

[Sujith Kumar Rajkumar]

Hi Harvey, 

 

Greetings from Syncfusion support. 

 

We are happy to hear your appreciation for our control functionality. You can set the required file name for the pdf file exported from Grid by assigning it through the pdf exportProperties. This requirement is documented in the below documentation link which you can check for more details on this, 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/pdf-export/#file-name-for-exported-document  

 

So your requirement of displaying a prompt for specifying the file name can be achieved by showing a dialog with an input element(content) on toolbar button click and assign the specified input value as the exported pdf file’s name. The steps for achieving this is mentioned below, 

 

Initially render an EJ2 dialog with two buttons – ‘OK’ & ‘Cancel’(with click event bound to them), define an input element as the content using its content template property and set it’s visibility as false. 

 

<ejs-dialog id='dialog' header="Enter pdf file name" showCloseIcon="true" isModal="true" visible="false" width="300px" target="#Grid"> 

        <e-content-template> 

            <div class='dialogContent'><input class="dialogText" /></div> 

        </e-content-template> 

        <e-dialog-buttons> 

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton> 

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton> 

        </e-dialog-buttons> 

</ejs-dialog> 

 

Then in Grid’s toolbarClick, open this EJ2 Dialog using its instance. 

 

// Grid’s toolbarClick event handler 

function toolbarClick(args) { 

    if (args.item.id === 'Grid_pdfexport') { 

        // The rendered EJ2 Dialog is displayed if pdf export toolbar button is clicked 

        var dialogObj = document.getElementById('dialog').ej2_instances[0]; 

        dialogObj.show(); 

    } 

} 

 

Now in the dialog button click handlers, get the dialog content input element’s value, use it as the file name for exporting pdf from Grid for the ‘OK’ button and close the dialog. 

 

// Dialog button click handler 

function dlgButtonClick(args) { 

    var gridObj = document.getElementById("Grid").ej2_instances[0]; 

    var dialogObj = document.getElementById('dialog').ej2_instances[0]; 

    if (args.target.innerText === "OK") { 

        // The input value is retrieved 

        var newName = args.target.closest('.e-dialog').querySelector('input').value; 

        // The input value is set as the file name for the pdf export 

        var exportProperties = { 

            fileName: newName + ".pdf" 

        }; 

        // Pdf export from Grid 

        gridObj.pdfExport(exportProperties); 

        // Dialog is hidden 

        dialogObj.hide(); 

    } else { 

        // Dialog is hidden 

        dialogObj.hide(); 

    } 

} 

 

We have prepared a sample based on this for your reference. You can download it from the following link, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/159713/ze/GridPdfExport-1559961977  

 

More details on the EJ2 Dialog can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/dialog/getting-started/  

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Harvey Kravis]

Wow, was not expecting a sample or a solution.  I am very happy with what you provided.  I enhanced it to handle CSV and Excel too.  In addition to the code changes below I also changed the header of the dialog to be: Enter file name (without extension).  If you have any suggestions for improving my solution let me know.  Thanks!!!!

<script>

    var extension;

    function dlgButtonClick(args) {

        var gridObj = document.getElementById("Grid").ej2_instances[0];

        var dialogObj = document.getElementById('dialog').ej2_instances[0];

        if (args.target.innerText === "OK") {

            var newName = args.target.closest('.e-dialog').querySelector('input').value + extension;

            switch (extension) {

                case ".pdf":

                    var exportProperties = { fileName: newName, pageOrientation: 'Landscape' };

                    gridObj.pdfExport(exportProperties);

                    break;

                case ".xlsx":

                    var exportProperties = { fileName: newName };

                    gridObj.excelExport(exportProperties);

                    break;

                case ".csv":

                    var exportProperties = { fileName: newName };

                    gridObj.csvExport(exportProperties);

                    break;

                default:

                    break;

            }

            dialogObj.hide();

        } else {

            dialogObj.hide();

        }

    }

    function toolbarClick(args) {

        switch (args.item.id) {

            case "Grid_pdfexport":

                extension = ".pdf";

                break;

            case "Grid_csvexport":

                extension = ".csv";

                break;

            case "Grid_excelexport":

                extension = ".xlsx";

                break;

            default:

                extension = "";

                break;

        }

        if (extension !== "") {

            var dialogObj = document.getElementById('dialog').ej2_instances[0];

            dialogObj.show();

        }

    }

[Sujith Kumar Rajkumar]

Hi Harvey, 

We are glad to hear that the provided solution helped resolve your query and the updated code shared looks perfect for your requirement. 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R