Excel Exports

In this topic, you'll learn how to add references for the gridexport and wijgrid, and add a selection of three Excel export types to an HTML project using HTML markup and jQuery script.

Excel Settings

Quick Start

To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup
Paste in your favorite text editor.
Copy Code

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Paste in your favorite text editor.	Copy Code
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

References	Copy Code
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script>

References

Copy Code

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

Add the following markup within the <body> tags to create the grid widget, drop-down selector, and button.

The <table> element creates the grid widget, and we call its id attribute in jQuery to initialize it.
The <input> element creates the button, and we call its id attribute in jQuery to export the grid in the click function.
The <select> element creates the dropdown list, and we call its id attribute in jQuery to collect the value to use for the exportFileType option.

Markup	Copy Code
<table id="wijgrid" /> <input type="button" value="Export to Excel" id="exportXLS"/> <select id="exporttype"> <option selected="selected" value="Xls">Export To XLS</option> <option value="Xlsx">Export To XLSX</option> <option value="Csv">Export To CSV</option> </select>

Markup

Copy Code

<table id="wijgrid" /> 
<input type="button" value="Export to Excel" id="exportXLS"/>
<select id="exporttype">
    <option selected="selected" value="Xls">Export To XLS</option>
    <option value="Xlsx">Export To XLSX</option>
    <option value="Csv">Export To CSV</option>
</select>

Within the <head> tags, below the references, add the following script to initialize the widget and populate it with data, and to export the grid when the button is clicked using the following settings.

A type variable collects the selected export type value from the <select> dropdown.
The path to the grid export API is directed to the ComponentOne demo server.
The grid to export is set to the id attribute of the wijgrid widget's markup.
The type of file to export is taken from the type variable.
The name of the exported file is set to MyGridExport.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid", "gridexport"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ cellClicked: function (e, args) { alert(args.cell.value()); }, allowSorting: true, data: [ [27, 'Canada', 'Adams, Craig', 'RW'], [43, 'Canada', 'Boucher, Philippe', 'D', 'R'], [24, 'Canada', 'Cooke, Matt', 'LW', 'L'], [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'], [1, 'United States', 'Curry, John', 'G', 'L'], ], columns: [ {headerText: "Number"}, {headerText: "Country"}, {headerText: "Player"}, {headerText: "Position"} ] }); }); $("#exportXLS").button().click(function () { var type = $("#exporttype").val(); wijmo.exporter.exportGrid({ serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/grid", grid: $("#wijgrid").data("wijmo-wijgrid"), fileName: "MyGridExport", exportFileType: wijmo.exporter.ExportFileType[type], excel: { author: "Ninja Code Monkey", autoRowHeight: true } }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijgrid", "gridexport"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            cellClicked: function (e, args) {
                alert(args.cell.value());
            },
            allowSorting: true,
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Country"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    $("#exportXLS").button().click(function () {
        var type = $("#exporttype").val();
        wijmo.exporter.exportGrid({
            serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/grid",
            grid: $("#wijgrid").data("wijmo-wijgrid"),
            fileName: "MyGridExport",
            exportFileType: wijmo.exporter.ExportFileType[type],
            excel: {
                author: "Ninja Code Monkey",
                autoRowHeight: true
            }
        });
    });
});
</script>

Save your HTML file and open it in a browser. The widget appears like the following live widget. Drop down the export types to select an Excel type, and click the Export to Excel button. The file appears in your Downloads folder.