Skip to content

Commit cd48154

Browse files
hanastasovhanastasov
committed
enhance documentation code samples for exporter
1 parent 677e185 commit cd48154

2 files changed

Lines changed: 85 additions & 64 deletions

File tree

‎HTMLSamples/grid/export-basic-grid.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,7 @@
2828
$.ig.loader({
2929
scriptPath: "%%ignite-ui%%/js/",
3030
cssPath: "%%ignite-ui%%/css/",
31-
resources:'igGrid,' +
32-
'modules/infragistics.documents.core.js,' +
33-
'modules/infragistics.excel.js,' +
34-
'modules/infragistics.gridexcelexporter.js'
31+
resources:'igGrid,' + 'igGridExcelExporter'
3532
});
3633

3734
$.ig.loader(function () {
@@ -51,28 +48,30 @@
5148

5249
$("#grid").igGrid({
5350
autoGenerateColumns: false,
54-
width: "100%",
55-
height: "200px",
5651
columns: [
5752
{ key: "ProductID", headerText: "$$(ProductID)", width: "100px", dataType: "number" },
58-
{ key: "Name", headerText: "$$(Name)", width: "150px", dataType: "string" },
53+
{ key: "Name", headerText: "$$(Name)", width: "250px", dataType: "string" },
5954
{ key: "ProductNumber", headerText: "$$(ProductNumber)", width: "200px", dataType: "number" }
6055
],
6156
dataSource: data,
6257
primaryKey: "ProductID"
6358
});
6459

6560
$("#exportButton").on("click", function () {
66-
$.ig.GridExcelExporter.exportGrid($("#grid"), {
67-
fileName: "igGrid"
68-
});
61+
$.ig.GridExcelExporter.exportGrid(
62+
$('#grid'),
63+
{
64+
fileName: 'igGrid',
65+
worksheetName: 'Sheet1',
66+
}
67+
);
6968
});
7069
});
7170
});
7271
</script>
7372
</head>
7473
<body>
7574
<table id="grid"></table><br>
76-
<input type="button" id="exportButton" value="$$(Export_Excel_Button)"></input>
75+
<input type="button" id="exportButton" value="$$(Export_Excel_Button)"></input>
7776
</body>
7877
</html>

‎HTMLSamples/grid/export-client-events.html‎

Lines changed: 75 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,25 @@
1111
#exportButton {
1212
float: left;
1313
}
14+
.exporting-overlay {
15+
position: absolute;
16+
background-color: rgba(181, 181, 181, 0.9);
17+
top: 0;
18+
left: 0;
19+
z-index: 100000;
20+
text-align: center;
21+
vertical-align: top;
22+
}
23+
.exporting-overlay:after {
24+
content: "";
25+
display: inline-block;
26+
vertical-align: middle;
27+
height: 100%;
28+
}
29+
.exporting-text {
30+
font-size: 46px;
31+
font-weight: bold;
32+
}
1433
</style>
1534
<!--Required scripts-->
1635
<script src="%%modernizr%%"></script>
@@ -28,91 +47,94 @@
2847
$.ig.loader({
2948
scriptPath: "%%ignite-ui%%/js/",
3049
cssPath: "%%ignite-ui%%/css/",
31-
resources: 'igGrid,' +
32-
'igGrid.Hiding,' +
33-
'igGrid.Filtering,' +
34-
'igGrid.Sorting,' +
35-
'igGrid.Paging,' +
36-
'igGrid.Summaries,' +
37-
'modules/infragistics.documents.core.js,' +
38-
'modules/infragistics.excel.js,' +
39-
'modules/infragistics.gridexcelexporter.js'
50+
resources: 'igGrid.Sorting.Filtering,' +
51+
'igGridExcelExporter'
4052
});
4153

4254
$.ig.loader(function () {
4355
var data = [
44-
{ 'ProductID': 1, 'Name': 'Omnis ut illum nisi.', 'ProductNumber': 2973311236, "InStock": true, "Quantity": 56, VendorWebsite: 'http://infragistics.com/', },
45-
{ 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', },
46-
{ 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26, VendorWebsite: 'http://infragistics.com/' },
47-
{ 'ProductID': 17, 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8, VendorWebsite: 'http://infragistics.com/' },
48-
{ 'ProductID': 18, 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62, VendorWebsite: 'http://infragistics.com/' },
49-
{ 'ProductID': 19, 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18, VendorWebsite: 'http://infragistics.com/' },
50-
{ 'ProductID': 20, 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/' },
51-
{ 'ProductID': 31, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41, VendorWebsite: 'http://infragistics.com/' },
52-
{ 'ProductID': 32, 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10, VendorWebsite: 'http://infragistics.com/' },
53-
{ 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/' }
56+
{ 'Name': 'Omnis ut illum nisi.', 'ProductNumber': 2973311236, "InStock": true, "Quantity": 56, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "07/25/2015" },
57+
{ 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "09/22/2014" },
58+
{ 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "08/13/2015" },
59+
{ 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "06/28/2014" },
60+
{ 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "04/19/2015" },
61+
{ 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "07/21/2015" },
62+
{ 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "03/10/2016" },
63+
{ 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "07/25/2016" },
64+
{ 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "09/01/2017" },
65+
{ 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "11/10/2015" }
5466
];
5567

5668
$("#grid").igGrid({
5769
autoGenerateColumns: false,
5870
columns: [
59-
{ headerText: "$$(ProductID)", key: "ProductID", dataType: "number", width: "100px" },
60-
{ headerText: "$$(Name)", key: "Name", dataType: "string", width: "250px" },
61-
{ headerText: "$$(ProductNumber)", key: "ProductNumber", dataType: "number", width: "200px" },
62-
{ headerText: "$$(InStock)", key: "InStock", dataType: "bool", width: "150px" },
63-
{ headerText: "$$(Quantity)", key: "Quantity", dataType: "number", width: "150px" },
64-
{ headerText: "$$(Vendorwebsite)", key: "VendorWebsite", width: "220px", template: '<a href="${VendorWebsite}">${VendorWebsite}</a>' }
71+
{ headerText: "Product Name", key: "Name", dataType: "string", width: "250px" },
72+
{ headerText: "Product Number", key: "ProductNumber", dataType: "number", width: "200px" },
73+
{ headerText: "In Stock", key: "InStock", dataType: "bool", width: "150px" },
74+
{ headerText: "Quantity", key: "Quantity", dataType: "number", width: "150px" },
75+
{ headerText: "Vendor website", key: "VendorWebsite", width: "220px", template: '<a href="${VendorWebsite}">${VendorWebsite}</a>' },
76+
{ headerText: "Delivery Date", key: "DeliveryDate", dataType: "date", width: "200px" },
6577
],
6678
dataSource: data,
6779
width: "100%",
68-
primaryKey: "ProductID",
6980
features: [
70-
{
71-
name: "Filtering"
72-
},
73-
{
74-
name: "Sorting",
75-
},
76-
{
77-
name: "Paging",
78-
type: "local",
79-
pageSize: 10
80-
}]
81+
{
82+
name: "Filtering"
83+
},
84+
{
85+
name: "Sorting",
86+
}
87+
]
8188
});
8289

8390
$("#exportButton").on("click", function () {
91+
var exportingOverlay = $('<div>');
8492
$.ig.GridExcelExporter.exportGrid($("#grid"), {
8593
fileName: "igGrid",
86-
gridFeatureOptions: { "sorting": "applied", "filtering": "applied", paging: "currentPage", "summaries": "applied" },
94+
gridFeatureOptions: { sorting: "applied", filtering: "applied" },
8795
},
8896
{
89-
headerCellExported: function (e, args) {
90-
if (args.columnKey == "Quantity") {
91-
args.xlRow.setCellValue(args.columnIndex, "$$(AvailableQuantity)");
92-
}
97+
exportStarting: function (e, args) {
98+
showOverlay(args.grid, exportingOverlay);
9399
},
94-
cellExporting: function (e, args) {
95-
if (args.columnKey == "Quantity" && args.cellValue > 15) {
96-
args.xlRow.getCellFormat(args.columnIndex).font().bold(1);
97-
}
100+
success: function () {
101+
hideOverlay(exportingOverlay);
98102
},
99103
cellExported: function (e, args) {
100-
if (args.xlRow.index() == 0) {
104+
if (args.xlRow.index() == 0) {
101105
return;
102106
}
103-
if (args.columnKey == 'VendorWebsite') {
107+
if (args.columnKey == "Quantity" && args.cellValue > 15) {
108+
args.xlRow.getCellFormat(args.columnIndex).font().bold(1);
109+
args.xlRow.getCellFormat(args.columnIndex).fill($.ig.excel.CellFill.createLinearGradientFill(45, '#FF0000', '#00FFFF'));
110+
}
111+
if (args.columnKey == 'VendorWebsite') {
104112
var xlRow = args.xlRow;
105113
xlRow.cells(args.columnIndex).applyFormula('=HYPERLINK("' + args.cellValue + '")');
106114
}
107115
},
108-
rowExported: function (e, args) {
109-
if (args.xlRow.index() == args.grid.igGrid("allRows").length - 1) {
110-
$('<div style="font-size:20px;">$$(LastRowExported)</div>').insertBefore('#exportButton').delay(1000).fadeOut();
111-
}
112-
}
116+
exportEnding: function (e, args) {
117+
args.worksheet.columns().item(5).cellFormat().formatString("dd/MMM/YYYY");
118+
},
113119
});
114120
});
115121
});
122+
123+
function showOverlay(grid, exportingOverlay) {
124+
var $gridContainer = $('#' + grid.attr('id') + '_container');
125+
126+
exportingOverlay.css({
127+
"width": $gridContainer.outerWidth(),
128+
"height": $gridContainer.outerHeight()
129+
}).html('<span class="exporting-text">Exporting...</span>');
130+
exportingOverlay.addClass("exporting-overlay");
131+
132+
$gridContainer.append(exportingOverlay);
133+
}
134+
135+
function hideOverlay(exportingOverlay) {
136+
exportingOverlay.remove();
137+
}
116138
</script>
117139
</head>
118140
<body>

0 commit comments

Comments
 (0)