I can't export to Excel and PDF - MVC Asp.net Core 2.2

Posted by: justarrow on 3 April 2019, 4:53 pm EST

  • Posted 3 April 2019, 4:53 pm EST

    Using this example http://help.grapecity.com/componentone/NetHelp/c1mvchelpers/webframe.html#ImportExportFlexGrid.html I am trying to add a button to export the grid to Excel .xlsx file but I can't get it to work.

    this is my view "OPEXWBS.cshtml"
    @using C1.Web.Mvc.Grid
    @model SUCOCoreControl.Models.RazorBudget.OPEXWBS
    @{
    ViewData["Title"] = "OPEXWBS";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }


    <!-- ============================================================== -->
    <!-- Page wrapper -->
    <!-- ============================================================== -->
    <div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid -->
    <!-- ============================================================== -->
    <div class="container-fluid">
    <!-- ============================================================== -->
    <!-- Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <div class="row page-titles">
    <div class="col-md-5 align-self-center">
    <h4 class="text-themecolor"><a> @ViewBag.Title</a></h4>
    </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <div class="row">
    <div class="col-12">
    <div class="card">
    <div class="card-body">
    <div class="col-md-6 col-xs-12">
    <div class="form-inline well well-lg">

    <a href="#" class="btn btn-info btn-rounded" id="export" onclick="exportExcel()">Export To .xlsx</a>
     
     
    <div class="checkbox">
    <label>
    <input type="checkbox" id="IncludeHeadersExport" class="bs-checkbox" checked="checked" /> Include Headers
    </label>

    </div>
    </div>
    </div>

    <div class="table-responsive m-t-40">

    <c1-Styles Theme="Light Theme" />

    <c1-flex-grid allow-add-new="true" allow-delete="true" allow-dragging="None" allow-resizing="Both" auto-generate-columns="false"
    selection-mode="RowRange" show-groups="false" width="1350px" height="auto" class="grid" id="OPEXWBS">
    <c1-flex-grid-column align="center" binding="SubHeaderID" header="Sub Header" min-width="100" width="200"
    quick-auto-size="true"></c1-flex-grid-column>
    <c1-flex-grid-column align="center" binding="OPEXWBSID" header="OPEX WBS" min-width="100" width="250"
    quick-auto-size="true"></c1-flex-grid-column>
    <c1-flex-grid-column align="left" binding="OPEXWBSENG" header="WBS English Name" min-width="100"
    width="450" quick-auto-size="true"></c1-flex-grid-column>
    <c1-flex-grid-column align="left" binding="ServiceMaterialENG" header="Service/Material" min-width="100"
    width="200" quick-auto-size="true"></c1-flex-grid-column>
    <c1-items-source page-size="10" create-action-url="@Url.Action("OPEXWBS_Create")" update-action-url="@Url.Action("OPEXWBS_Update")"
    delete-action-url="@Url.Action("OPEXWBS_Delete")" source-collection="@((IEnumerable<SUCOCoreControl.Models.RazorBudget.OPEXWBS>)ViewBag.OPEXWBS1)"></c1-items-source>
    <c1-flex-grid-filter default-filter-type="Both"></c1-flex-grid-filter>
    </c1-flex-grid>

    <c1-pager owner="OPEXWBS"></c1-pager>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    @section Scripts {

    <script src="~/assets/node_modules/jszip/dist/jszip.min.js"></script>
    <script src="@Url.Content("~/Scripts/Export.js")" type="text/javascript"></script>

    <script type="text/javascript">

    c1.documentReady(function () {
    if (window["InitialControls"]) {
    window["InitialControls"]();
    }
    });


    The "Export.js"
    //Controls Declaration
    var OPEXWBS = null,
    IncludeHeadersExport = null,

    //Controls Initialization
    function InitialControls() {
    OPEXWBS = wijmo.Control.getControl("#OPEXWBS");
    IncludeHeadersExport = document.getElementById('IncludeHeadersExport');
    }

    // export
    function exportExcel() {
    if (OPEXWBS) {
    wijmo.grid.xlsx.FlexGridXlsxConverter.save(OPEXWBS, { includeColumnHeaders: IncludeHeadersExport.checked }, 'OPEXWBS.xlsx');
    }
    };


    The grid is showing and functioning as intended, but the export button when clicked is doing nothing.

    What is wrong in my code??
  • Marked as Answer

    Replied 4 April 2019, 3:18 pm EST

    Hi,
    The code seems OK and it should be work. However, we suspect the following line may be the issue cause:
    <script src="~/assets/node_modules/jszip/dist/jszip.min.js"></script>

    Probably, the JSZip file is not loaded correctly.

    Further, could you please check in the console if there is any while you click on Export button. Also, the exportExcel method is getting called.

    If the issue persists, please create a separate demo sample depicting your issue and share with us so that we may debug and assist you ahead.

    Regards,
    Manish Gupta
  • Replied 4 April 2019, 10:02 pm EST

    Thank you, I was able to make it work. the problem was in jszip, I was referencing version 3.1.3 while wijmo only works with version 2.5.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels