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??
