diff --git a/HTMLSamples/grid/export-basic-grid.html b/HTMLSamples/grid/export-basic-grid.html index d773f82..abe2bf6 100644 --- a/HTMLSamples/grid/export-basic-grid.html +++ b/HTMLSamples/grid/export-basic-grid.html @@ -28,10 +28,7 @@ $.ig.loader({ scriptPath: "%%ignite-ui%%/js/", cssPath: "%%ignite-ui%%/css/", - resources:'igGrid,' + - 'modules/infragistics.documents.core.js,' + - 'modules/infragistics.excel.js,' + - 'modules/infragistics.gridexcelexporter.js' + resources:'igGrid,' + 'igGridExcelExporter' }); $.ig.loader(function () { @@ -51,11 +48,9 @@ $("#grid").igGrid({ autoGenerateColumns: false, - width: "100%", - height: "200px", columns: [ { key: "ProductID", headerText: "$$(ProductID)", width: "100px", dataType: "number" }, - { key: "Name", headerText: "$$(Name)", width: "150px", dataType: "string" }, + { key: "Name", headerText: "$$(Name)", width: "250px", dataType: "string" }, { key: "ProductNumber", headerText: "$$(ProductNumber)", width: "200px", dataType: "number" } ], dataSource: data, @@ -63,9 +58,13 @@ }); $("#exportButton").on("click", function () { - $.ig.GridExcelExporter.exportGrid($("#grid"), { - fileName: "igGrid" - }); + $.ig.GridExcelExporter.exportGrid( + $('#grid'), + { + fileName: 'igGrid', + worksheetName: 'Sheet1', + } + ); }); }); }); @@ -73,6 +72,6 @@

- + \ No newline at end of file diff --git a/HTMLSamples/grid/export-client-events.html b/HTMLSamples/grid/export-client-events.html index 10bca07..d9b42bb 100644 --- a/HTMLSamples/grid/export-client-events.html +++ b/HTMLSamples/grid/export-client-events.html @@ -7,10 +7,28 @@ .right { float: right; } - #exportButton { float: left; } + .exporting-overlay { + position: absolute; + background-color: rgba(181, 181, 181, 0.9); + top: 0; + left: 0; + z-index: 100000; + text-align: center; + vertical-align: top; + } + .exporting-overlay:after { + content: ""; + display: inline-block; + vertical-align: middle; + height: 100%; + } + .exporting-text { + font-size: 46px; + font-weight: bold; + } @@ -28,91 +46,94 @@ $.ig.loader({ scriptPath: "%%ignite-ui%%/js/", cssPath: "%%ignite-ui%%/css/", - resources: 'igGrid,' + - 'igGrid.Hiding,' + - 'igGrid.Filtering,' + - 'igGrid.Sorting,' + - 'igGrid.Paging,' + - 'igGrid.Summaries,' + - 'modules/infragistics.documents.core.js,' + - 'modules/infragistics.excel.js,' + - 'modules/infragistics.gridexcelexporter.js' + resources: 'igGrid.Sorting.Filtering,' + + 'igGridExcelExporter' }); $.ig.loader(function () { var data = [ - { 'ProductID': 1, 'Name': 'Omnis ut illum nisi.', 'ProductNumber': 2973311236, "InStock": true, "Quantity": 56, VendorWebsite: 'http://infragistics.com/', }, - { 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', }, - { 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26, VendorWebsite: 'http://infragistics.com/' }, - { 'ProductID': 17, 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8, VendorWebsite: 'http://infragistics.com/' }, - { 'ProductID': 18, 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62, VendorWebsite: 'http://infragistics.com/' }, - { 'ProductID': 19, 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18, VendorWebsite: 'http://infragistics.com/' }, - { 'ProductID': 20, 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/' }, - { 'ProductID': 31, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41, VendorWebsite: 'http://infragistics.com/' }, - { 'ProductID': 32, 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10, VendorWebsite: 'http://infragistics.com/' }, - { 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/' } + { 'Name': 'Omnis ut illum nisi.', 'ProductNumber': 2973311236, "InStock": true, "Quantity": 56, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "07/25/2015" }, + { 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "09/22/2014" }, + { 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "08/13/2015" }, + { 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "06/28/2014" }, + { 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "04/19/2015" }, + { 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "07/21/2015" }, + { 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "03/10/2016" }, + { 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "07/25/2016" }, + { 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "09/01/2017" }, + { 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "11/10/2015" } ]; $("#grid").igGrid({ autoGenerateColumns: false, columns: [ - { headerText: "$$(ProductID)", key: "ProductID", dataType: "number", width: "100px" }, { headerText: "$$(Name)", key: "Name", dataType: "string", width: "250px" }, { headerText: "$$(ProductNumber)", key: "ProductNumber", dataType: "number", width: "200px" }, { headerText: "$$(InStock)", key: "InStock", dataType: "bool", width: "150px" }, { headerText: "$$(Quantity)", key: "Quantity", dataType: "number", width: "150px" }, - { headerText: "$$(Vendorwebsite)", key: "VendorWebsite", width: "220px", template: '${VendorWebsite}' } + { headerText: "$$(Vendorwebsite)", key: "VendorWebsite", width: "220px", template: '${VendorWebsite}' }, + { headerText: "$$(DeliveryDate)", key: "DeliveryDate", dataType: "date", width: "200px" }, ], dataSource: data, width: "100%", - primaryKey: "ProductID", features: [ - { - name: "Filtering" - }, - { - name: "Sorting", - }, - { - name: "Paging", - type: "local", - pageSize: 10 - }] + { + name: "Filtering" + }, + { + name: "Sorting", + } + ] }); $("#exportButton").on("click", function () { + var exportingOverlay = $('
'); $.ig.GridExcelExporter.exportGrid($("#grid"), { fileName: "igGrid", - gridFeatureOptions: { "sorting": "applied", "filtering": "applied", paging: "currentPage", "summaries": "applied" }, + gridFeatureOptions: { sorting: "applied", filtering: "applied" }, }, { - headerCellExported: function (e, args) { - if (args.columnKey == "Quantity") { - args.xlRow.setCellValue(args.columnIndex, "$$(AvailableQuantity)"); - } + exportStarting: function (e, args) { + showOverlay(args.grid, exportingOverlay); }, - cellExporting: function (e, args) { - if (args.columnKey == "Quantity" && args.cellValue > 15) { - args.xlRow.getCellFormat(args.columnIndex).font().bold(1); - } + success: function () { + hideOverlay(exportingOverlay); }, cellExported: function (e, args) { if (args.xlRow.index() == 0) { return; } + if (args.columnKey == "Quantity" && args.cellValue > 15) { + args.xlRow.getCellFormat(args.columnIndex).font().bold(1); + args.xlRow.getCellFormat(args.columnIndex).fill($.ig.excel.CellFill.createLinearGradientFill(45, '#FF0000', '#00FFFF')); + } if (args.columnKey == 'VendorWebsite') { var xlRow = args.xlRow; xlRow.cells(args.columnIndex).applyFormula('=HYPERLINK("' + args.cellValue + '")'); } }, - rowExported: function (e, args) { - if (args.xlRow.index() == args.grid.igGrid("allRows").length - 1) { - $('
$$(LastRowExported)
').insertBefore('#exportButton').delay(1000).fadeOut(); - } - } + exportEnding: function (e, args) { + args.worksheet.columns().item(5).cellFormat().formatString("dd/MMM/YYYY"); + }, }); }); }); + + function showOverlay(grid, exportingOverlay) { + var $gridContainer = $('#' + grid.attr('id') + '_container'); + + exportingOverlay.css({ + "width": $gridContainer.outerWidth(), + "height": $gridContainer.outerHeight() + }).html('Exporting...'); + exportingOverlay.addClass("exporting-overlay"); + + $gridContainer.append(exportingOverlay); + } + + function hideOverlay(exportingOverlay) { + exportingOverlay.remove(); + } diff --git a/HTMLSamples/grid/strings-en.json b/HTMLSamples/grid/strings-en.json index 064ed6d..caa8cf6 100644 --- a/HTMLSamples/grid/strings-en.json +++ b/HTMLSamples/grid/strings-en.json @@ -35,6 +35,7 @@ "cran_juice": "Cranberry Juice", "date_format": "ddd, MMM-d-yy HH:mm", "default_row_selectors": "Default Row Selectors", + "DeliveryDate": "Delivery Date", "Description": "Description", "dvd_player": "DVD Player", "EditingAPIEvents_editMode": "Edit mode", diff --git a/HTMLSamples/grid/strings-ja.json b/HTMLSamples/grid/strings-ja.json index e670564..3672b05 100644 --- a/HTMLSamples/grid/strings-ja.json +++ b/HTMLSamples/grid/strings-ja.json @@ -35,6 +35,7 @@ "cran_juice": "クランベリー ジュース", "date_format": "yyyy年MM月dd日(ddd) HH時mm分", "default_row_selectors": "デフォルトの行セレクター", + "DeliveryDate": "出荷日付", "Description": "説明", "dvd_player": "DVD プレーヤー", "EditingAPIEvents_editMode": "編集モード",