toolbarClick event not working to PdfExport and ExcelExport

[Adolfo Ibarra Landeo]

Hi, team.

I had no problems to implement the Grid control at any point, but I do not know what happens in the export of the data. According to the documentation, a "Script" section must be included, in which the toolbarClick function is called and AllowExporting must be enabled for each case in the control declaration. The buttons are displayed without problems, but nothing happens when I press them.
I must say that, looking for the Grid from the console and calling its methods pdfExport() and excelExport(), the files are generated without problems.

My code is the following:

<div>
    @Html.EJS().Grid("ParticipantsGrid").AllowFiltering().AllowExcelExport().AllowPdfExport().Columns(col =>
{
    col.Field("Id").HeaderText("ID").IsPrimaryKey(true).Width("120").Add();
    col.Field("Identity").HeaderText("Número").Width("150").Add();
    col.Field("AttendeeName").HeaderText("Nombres").Width("150").Add();
    col.Field("AttendeeLastName").HeaderText("Apellidos").Width("150").Add();
    col.Field("TypeParticipant").AllowEditing(false).HeaderText("Tipo").Width("150").Add();
    col.Field("AttendeePosition").HeaderText("Cargo").Width("150").Add();
    col.Field("AttendeeFaculty").HeaderText("Facultad").Width("150").Add();
    col.Field("PaymentType").AllowEditing(false).HeaderText("Método de pago").Width("150").Add();
    col.Field("Amount").HeaderText("Monto").Format("C2").Width("150").Add();
}).AllowPaging().AllowSorting().AllowGrouping().AllowReordering().AllowResizing().EditSettings(edit =>
{ edit.AllowDeleting(true).AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).ShowDeleteConfirmDialog(true);
}).FilterSettings(filter => {
    filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel);
}).PageSettings(page => page.PageSize(10)).Toolbar(new List<string>() { "Edit", "Delete", "Cancel", "Search", "PdfExport", "ExcelExport" }).Render()
</div>

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("ParticipantsGrid").ej2_instances[0];
        if (args.item.id === 'Grid_pdfexport') {
            gridObj.pdfExport();
        }
        if (args.item.id === 'Grid_excelexport') {
            gridObj.excelExport();
        }
    }
</script>

[Venkatesh Ayothi Raman]

Hi Adolfo, 

 

 

Thanks for using Syncfusion products. 

 

 

We went through your code example that you have shared for us and found that you are missed to define the ToolbarClick function in your code example. This is cause of this issue, so we suggest you define the toolbarclick function like as follows, 

[Grid] 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowGrouping().AllowPdfExport().AllowExcelExport().ToolbarClick("toolbarClick").Columns(col => 

   { 

 

       . .   . 

 

   }).AllowPaging().PageSettings(p=>p.PageCount(5)).Toolbar(new List<string>() { "ExcelExport", "PdfExport", "CsvExport" }).Render() 

 

 

 

Help documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html#toolbarclick 

 

Online demo: https://aspnetmvc.syncfusion.com/Grid/DefaultExporting#/material 

 

Also, we found that Grid id is ‘ParticipantsGrid’, but in toolbar click function you are checking the condition using id as Grid instead of  ‘ParticipantsGrid’ like as follows, 

function toolbarClick(args) {
        var gridObj = document.getElementById("ParticipantsGrid").ej2_instances[0];
        if (args.item.id === 'Grid_pdfexport') {
            gridObj.pdfExport();
        }
        if (args.item.id === 'Grid_excelexport') {
            gridObj.excelExport();
        }
    } 

 

This is not a recommended way and we suggest you to use the following code example for check the condition based on Grid ID to export the Grid , 

 

function toolbarClick(args) {
        var gridObj = document.getElementById("ParticipantsGrid").ej2_instances[0];
        if (args.item.id === ‘gridObj.element.id_pdfexport') {
            gridObj.pdfExport();
        }
        if (args.item.id === gridObj.element.id_excelexport') {
            gridObj.excelExport();
        }
    } 

  

Regards, 

Venkatesh Ayothiraman. 

[Adolfo Ibarra Landeo]

Thank you very much, I was able to solve this difficulty without problems after correcting the errors.

[Pavithra Subramaniyam]

Hi Adolfo, 

 

We are glad to hear that your issue has been resolved. 

 

Please contact us if you have any queries. 

 

Regards, 

Pavithra S.