PDF / Excel Exprt customize file name

[CHIHPEI]

How can I customize the export file name?

Something like showing a dialog which I could enter the file name after clicking the toolbar.

[Alexander]

Hi CHIHPEI,

Thank you for the provided information.

If you want to set file names initially you can do this through the .Pdf() and .Excel() configuration methods. For example:

.Pdf(pdf => pdf.FileName("GridExport.pdf"))

.Excel(excel => excel.FileName("GridExport.xlsx"))

If you want to prompt the user to set the file name:

• It would require you to prevent the default behavior of the specified export event handler in order to execute custom logic for setting the file name.
• Prompt the user to enter a value via a dialog, for example.
• Provide a global variable to know when to change the file name and prevent the default behavior. Otherwise, the approach won't execute correctly.

With that said I have made a Telerik REPL illustrating the mentioned above and it is as follows:

HTML Helper:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
   //additional configuration...
    .ToolBar(toolbar =>
    {
        toolbar.Pdf();
        toolbar.Create();
        toolbar.Save();
    })
    .Events(events => events.PdfExport("pdfExportHandler"))
    //additional configuration...
)

JavaScript:

 var shouldPrevent = true; //introduce a global variable
    function pdfExportHandler(e) {
          var grid = e.sender;
              if(shouldPrevent){
                e.preventDefault(); //if the global variable is set to true prevent the default behavior and set the entered file name
                  kendo.prompt("Please, enter a fileName:", "my desired name").done(function (data) { //provide a promp where the user enter a name
                    grid.options.pdf.fileName = data; //set the name
                    shouldPrevent = false; //set the should prevent to false
                    grid.saveAsPDF(); //generate the Pdf file
                  })
              } 
        shouldPrevent = true;
    }

Additionally, the same approach is applicable for the Excel Export by setting the name through the workbook configuration object. For example:

e.workbook.fileName = "Grid.xlsx";

I hope this helps. Please let me know if you have any further questions, and I will be happy to answer them.

Regards,
Alexander
Progress Telerik

[CHIHPEI]

Hi, Alexander

I've tried the  Telerik REPL example, and it was what I've looking for!
I applied it into my project and it works just fine.

Thanks for the great support and detailed illustration.

Regards,
Chipei

 

[CHIHPEI]

Hi, Alexander

It's been a long time after I asked this question,

Recently, I've found that the pdfExportHandler could export the file and also with a desired file name successfully,

but when I checked the Web Devtool

It showed an uncaught TypeError: cannot read properties of undefined (reading 'done'), as the provided picture.

How can I solve this problem?

BTW, I'm using kendo.all.min.js on vesrion 2021.3.914

[Alexander]

Hi CHIHPEI,

Indeed, the following error seems to be fired with the pdfExportHandler. Therefore, I would need additional time to investigate this matter further and will contact you as soon as possible to let you know of my findings.

In the meantime, I would recommend reviewing this alternative approach that achieves the desired result:

• Initialize a separate dialog with a textbox programmatically and set it initially as hidden:

<div id="dialog">
    <input id="txtBox" />
</div>
...additional grid initialization
<script>
    $(document).ready(function () {
        $("#txtBox").kendoTextBox({}); //rendered inside the dialog$("#dialog").kendoDialog({
 width: "500px",
 title: "Set Pdf File Name",
 visible: false, //used for hiding the dialog initially
            ...
 }).data("kendoDialog");
 })
</script>

• Provide an action handler inside the Dialog and within the handler, call the .saveAsPDF() method of the grid whilst closing the dialog:

<script>
    $(document).ready(function () {
        $("#dialog").kendoDialog({
            width: "500px",
            title: "Set PDF File Name",
            visible: false,
            actions: [
                { text: 'OK', primary: true, action: updateFileName },
            ]
        }).data("kendoDialog");

        function updateFileName() {
            var grid = $("#grid").data("kendoGrid"); //get a reference of the grid
            $("#dialog").data("kendoDialog").close(); //close the dialog
            grid.saveAsPDF(); //save the PDF file
        }
    })
</script>	

• Similarly to the previous approach subscribe to the PdfExport event of the grid and execute custom logic for setting the file name:
  

.Events(e=>e.PdfExport("pdfHandler"))

<script>
var shouldPrevent = false; //introduce a global variable
function pdfHandler(e) {
    var grid=e.sender; //get a reference of the grid
    if (shouldPrevent) { //if the global variable is set to true prevent set the file name
        var value = $("#txtBox").data("kendoTextBox").value(); //get the name of the textBox 
        grid.options.pdf.fileName = value; //set the file name
        shouldPrevent = false;
    }
    else {//if not prevent the default behavior and open the dialog
        shouldPrevent = true;
        e.preventDefault();
        $("#dialog").data("kendoDialog").open();

    }
}
</script>

In addition, I am attaching a runnable sample (Kendo version: 2021.3.914) for you to review that showcases the mentioned above.

[Alexander]

Hi CHIHPEI,

Thank you for your patience. Upon further investigation, it appears the observed behavior is a bug on our end.

I have therefore logged an item on your behalf - you can monitor the status of the item here:

https://github.com/telerik/kendo-ui-core/issues/6697

Currently, I cannot suggest a different approach other than changing the file names manually without preventing the default behavior of the pdf export event of the Grid, which I understand might not be viable in your scenario.

Finally, I have updated your Telerik points for helping us identify this issue.

[CHIHPEI]

Hi Alexander,

thanks for checking out the issue and providing the alternative method,

I'll spend some time to try it out!

thanks a again,

and hopefully to hear good news about the bug