Excel Export from Toolbar button not working

[Scot Woodyard]

I have a data grid with a toolbar that contains the Export to Excel button.  When I click on that button, nothing happens.  Here is the HTML for the grid:

    <ejs-grid id="Grid"

        dataSource="Model.Instructors"

        allowSorting="true"

        allowPaging="true"

        allowExcelExport="true"

        allowPdfExport="false"

        allowFiltering="true"

        contextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "FirstPage", "PrevPage","LastPage", "NextPage"})"

        toolbar="@(new List<string>() {"Search", "Print", "ExcelExport" })">

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

        <e-grid-filterSettings type="CheckBox"></e-grid-filterSettings>

        <e-grid-columns>

            <e-grid-column field="EmployeeNumber" headerText="Employee #" textAlign="Left"></e-grid-column>

            <e-grid-column field="FirstName" headerText="First Name"></e-grid-column>

            <e-grid-column field="LastName" headerText="Last Name"></e-grid-column>

            <e-grid-column field="Appointment" headerText="Appointment"></e-grid-column>

            <e-grid-column field="College" headerText="College"></e-grid-column>

            <e-grid-column field="Department" headerText="Department"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

[Rajapandiyan Settu]

Hi Scot, 

Greetings from syncfusion support. 

Query :  I have a data grid with a toolbar that contains the Export to Excel button.  When I click on that button, nothing happens. 

We have analyzed your query and understood that you need export the grid when clicking the Excel Export button in the toolbar. You can achieve your requirement by using toolbarClick event and calling excelExport() method, please refer the below code example and sample for more information. 

  

<ejs-grid id="Grid" 

          dataSource="@ViewBag.DataSource"  

          allowSorting="true" 

          allowPaging="true" 

          allowExcelExport="true" 

          allowPdfExport="false" 

          allowFiltering="true" 

          contextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "FirstPage", "PrevPage","LastPage", "NextPage"})" 

          toolbar="@(new List<string>() {"Search", "Print", "ExcelExport" })" toolbarClick="toolbarClick">  // bind toolbarClick event 

 

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

    <e-grid-filterSettings type="CheckBox"></e-grid-filterSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="OrderID" textAlign="Left" width="140"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="CustomerID"  width="140"></e-grid-column> 

        <e-grid-column field="ShipName" headerText="ShipName"  width="140"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="ShipCity"  width="140"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    function toolbarClick(args) { 

// get grid element instances 

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

        if (args.item.id === 'Grid_excelexport') { // Excel Export button id = Grid element ID + “_“ + “excelexport” 

// call excel export method to export the grid 

            gridObj.excelExport(); 

        } 

    } 

</script> 

Refer excel export documentation for more information. 

UG : https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-exporting/ 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_export_toolbarClick-340824640.zip 

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S 

[Scot Woodyard]

When I add the "toolbarClick="toolbarClick" tag to the grid, all the controls on the page stop rendering.  Chrome dev tools are showing the following error:

(index):8026 Uncaught ReferenceError: toolbarClick is not defined

    at (index):8026

I've attached the HTML file for the page.

Attachment: Index_f50f4b51.zip

[Rajapandiyan Settu]

Hi Scot, 

 

Thanks for your update. 

 

Query : Uncaught ReferenceError: toolbarClick is not defined 

 

Based on your attached code example we could suspect that external function is not bind to the toolbarClick, so we suggest you to declare toobarClick function as window function. Refer the below code example. 

  

 

<script> 

        window.toolbarClick = function (args) { 

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

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

                gridObj.excelExport(); 

            } 

        }         

    </script> 

 

 

If you still face the same issue, please share the issue reproduced sample which is very helpful for us to provide the solution ASAP. 

  

Regards, 

Rajapandiyan S 

[Scot Woodyard]

I made that change, and now the Chrome dev tools are showing the error:

Uncaught ReferenceError: toolbarClick is not defined

[Thiyagu Subramani]

Hi Scot, 

 

Thanks for your update. 

 

Still, at our end, we were unable to reproduce your reported problem. So, before going further, please share the issue of reproducing the sample or reproduce the issue in the attached sample, dot net core and Syncfusion package version, then only we can provide appropriate solution ASAP. 

 

Please get back to us, if you need any further assistance. 

 

Regards, 

Thiyagu S. 

[Scot Woodyard]

Here is what I did:

I used Syncfusion to generate a .net core 2.1 sample that contains a data grid

Ran the sample to verify it works

Added an Excel export button and the code to support it per the thread below

Ran the sample and clicked on the Excel button

Nothing happens.

The entire project is attached.

Attachment: core21_7813ba00.zip

[Rajapandiyan Settu]

Hi Scot, 

 

Thanks for your update. 

 

Query : Ran the sample and clicked on the Excel button. Nothing happens. 

 

We have analyzed the attached sample. The toolbarClick function in grid is perfectly working fine in that project and we found that you did not enable allowExcelExporting in your grid, so when we clicking ExcelExport button nothing happens. 

 

We suggest you to enable the allowExcelExport as true to export the grid into excel. Now the excelExporting is working fine in that project. Please refer the below code example and sample for more information. 

  

 

<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" 

              allowPaging="true" 

              allowSorting="true" 

              allowResizing="true" 

              allowFiltering="true" 

              allowExcelExport="true" 

              allowGrouping="true" 

              toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel","Search" ,"ExcelExport"})" 

              toolbarClick="toolbarClick"> 

------- 

    </ejs-grid> 

 

UG : https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-exporting/ 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/core21-1134034588.zip 

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rajapandiyan S 

[Scot Woodyard]

Thank you!  That did it!

[Rajapandiyan Settu]

Hi Scot, 

We are glad that the provided solution is resolved your requirement. 

Regards, 

Rajapandiyan S 

[Florene J Anderson]

Hi Scot, 

Greetings from syncfusion support. 

Query :  I have a data grid with a toolbar that contains the Export to Excel button.  When I click on that button, nothing happens. 

We have analyzed your query and understood that you need export the grid when clicking the Excel Export button in the toolbar. You can achieve your requirement by using toolbarClick event and calling excelExport() method, please refer the below code example and sample for more information. 

  

<ejs-grid id="Grid" 

          dataSource="@ViewBag.DataSource"  

          allowSorting="true" 

          allowPaging="true" 

          allowExcelExport="true" 

          allowPdfExport="false" 

          allowFiltering="true" 

          contextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "FirstPage", "PrevPage","LastPage", "NextPage"})" 

          toolbar="@(new List<string>() {"Search", "Print", "ExcelExport" })" toolbarClick="toolbarClick">  // bind toolbarClick event 

 

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

    <e-grid-filterSettings type="CheckBox">e-grid-filterSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="OrderID" textAlign="Left" width="140">e-grid-column> 

        <e-grid-column field="CustomerID" headerText="CustomerID"  width="140">e-grid-column> 

        <e-grid-column field="ShipName" headerText="ShipName"  width="140">e-grid-column> 

        <e-grid-column field="ShipCity" headerText="ShipCity"  width="140">e-grid-column> 

    e-grid-columns> 

ejs-grid> 

 

<script> 

    function toolbarClick(args) { 

// get grid element instances 

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

        if (args.item.id === 'Grid_excelexport') { // Excel Export button id = Grid element ID + “_“ + “excelexport” 

// call excel export method to export the grid 

            gridObj.excelExport(); 

        } 

    } 

script> 

I wrote a dissertation related to this issue and the service https://writix.co.uk/write-my-dissertation-for-me helped me a lot, with which I have been collaborating for several months. I really like the quality and price of the services provided.
Refer excel export documentation for more information. 

UG : https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-exporting/ 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_export_toolbarClick-340824640.zip 

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S 

Thank you for such a valuable information. I've been looking for a solution to this problem for a long time and I finally found one. Really appreciate your reply!

[Rajapandiyan Settu]

Hi Florene, 

We are glad that the provided solution resolves your requirement. 

Regards, 

Rajapandiyan S 

[Janet Locane]

Thank you for such a useful information!