PDF Export not working

[Chris Franz]

I am using a DataGrid and want to export it as a PDF. Excel Export works perfectly but PDF Export does not work at all. I am using ASP.NET CORE 7 on VS2022 using Syncfusion ej2 version 24.1.47

Here is my CHTML code:

@model IEnumerable<IdahoLUG.Models.EventViewModel>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    Html.AntiForgeryToken();
}


<h1>Manage Events</h1>


<!-- List of events -->
<ejs-grid id="ExportGrid" allowSorting="true" allowPaging="true" autoFit="true" height="100%"  allowPdfExport="true" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "ExcelExport", "PdfExport" })">
    <e-data-manager url="/Management/EventDataSource" adaptor="UrlAdaptor"></e-data-manager>
    <e-grid-loadingIndicator indicatorType="Spinner"></e-grid-loadingIndicator>
    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="EventId" headerText="Event ID" isPrimaryKey="true" max-width="50" allowEditing="false" visible="false"></e-grid-column>
        <e-grid-column field="EventName" headerText="Name" max-width="200"></e-grid-column>
        <e-grid-column field="EventLocation" headerText="Location" max-width="250"></e-grid-column>
        <e-grid-column field="EventDescription" headerText="Description" max-width="500"></e-grid-column>
        <e-grid-column field="StartDate" headerText="Start" format="dd MMM yyyy HH:mm" max-width="150"></e-grid-column>
        <e-grid-column field="EndDate" headerText="End" format="dd MMM yyyy HH:mm" max-width="150" ></e-grid-column>
        <e-grid-column field="EventTypeName" headerText="Type" max-width="100" allowEditing="false"></e-grid-column>
    </e-grid-columns>
</ejs-grid>


<!-- Grid javascript -->
<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("ExportGrid").ej2_instances[0];
        if (args.item.id === 'ExportGrid_excelexport') {
            gridObj.excelExport();
        }
        if (args.item.id === 'ExportGrid_pdfexport') {
            gridObj.pdfExport();
        }
    }


    function onLoad() {
        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];
    }
</script>


[Rajapandi Ravi]

Hi Chris,

Greetings from Syncfusion support

After reviewing your shared code example, you are using the custom format to display the Date column (StartDate & EndDate) in the Grid. If you like to use the custom format for the date column, you need to define it by using the customFormat property in the column definition. Since you are defining the custom format without using customFormat property it throws script error while exporting the pdf document and it was the cause of the problem.

So, we suggest you define the format for date column inside the customFormat property to resolve the problem and achieve your requirement. Please refer the below code example and sample for more information.

 

<ejs-grid id="Grid" allowSorting="true" allowPaging="true" autoFit="true" allowPdfExport="true" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport", "PdfExport" })">

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager>

    <e-grid-loadingIndicator indicatorType="Spinner"></e-grid-loadingIndicator>

    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

    <e-grid-columns>

        .  .  .  .  .  .  .  .  .

        .  .  .  .  .  .  .  .  .

        <e-grid-column field="OrderDate" headerText="Order Date" customFormat="@(new { type = "date", format = "dd MMM yyyy HH:mm" })" textAlign="Right" width="140"></e-grid-column>

        .  .  .  .  .  .  .  .  .

        .  .  .  .  .  .  .  .  .

    </e-grid-columns>

</ejs-grid>

 

Sample:

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/columns#date-formatting

Regards,

Rajapandi R

Attachment: 186480sample_39ea77a3.zip

[Chris Franz]

Thank You! The customFormat setting worked. 

[Getsy Edwin]

Hi Chris,

You're welcome!! Please feel free to contact us if need any assistance.

Regards,

Getsy