@model
IEnumerable<
ProductData
>
@
{
ClientSettingsModel optionsModel = ViewBag.DemoOptions;
}
<
c1-pivot-engine
id
=
"indexEngine"
show-row-totals
=
"Subtotals"
show-column-totals
=
"Subtotals"
totals-before-data
=
"true"
>
<
c1-items-source
source-collection
=
"Model"
></
c1-items-source
>
<
c1-view-field-collection
c1-property
=
"RowFields"
items
=
"Country,Date"
></
c1-view-field-collection
>
<
c1-view-field-collection
c1-property
=
"ColumnFields"
items
=
"Product"
></
c1-view-field-collection
>
<
c1-view-field-collection
c1-property
=
"ValueFields"
items
=
"Sales"
></
c1-view-field-collection
>
</
c1-pivot-engine
>
<
div
class
=
"row"
>
<
div
class
=
"col-sm-4 col-md-4"
>
<
c1-pivot-panel
id
=
"@(optionsModel.ControlId)"
items-source-id
=
"indexEngine"
deferred-update
=
"false"
></
c1-pivot-panel
>
</
div
>
<
div
class
=
"col-sm-8 col-md-8"
>
<
c1-pivot-grid
id
=
"indexGrid"
items-source-id
=
"indexEngine"
outline-mode
=
"false"
show-value-field-headers
=
"false"
></
c1-pivot-grid
>
<
p
>
<
span
style
=
"vertical-align:top; color:black;"
>
OutlineMode <
input
id
=
"outlineMode"
type
=
"checkbox"
onchange
=
"toggleOutlineMode(event)"
style
=
"margin-right:5em;"
/>
ShowValueFieldHeaders <
input
id
=
"ShowValueFieldHeaders"
type
=
"checkbox"
onchange
=
"toggleShowValueFieldHeaders(event)"
/>
</
span
>
</
p
>
</
div
>
</
div
>
<
p
>
@Html
.Raw(OlapRes.Index_Text0)</
p
>
<
button
type
=
"button"
class
=
"btn btn-default"
onclick
=
"saveView()"
>
@Html
.Raw(OlapRes.Index_Text7)</
button
>
<
button
type
=
"button"
class
=
"btn btn-default"
onclick
=
"loadView()"
>
@Html
.Raw(OlapRes.Index_Text8)</
button
>
<
p
></
p
>
<
p
>
@Html
.Raw(OlapRes.Index_Text2)</
p
>
<
p
>
@Html
.Raw(OlapRes.Index_Text3)</
p
>
<
button
type
=
"button"
class
=
"btn btn-default"
onclick
=
"excelExport()"
>
@Html
.Raw(OlapRes.Index_Text9)
</
button
>
@section
Scripts{
<script type="text/javascript">
function
saveView() {
var
ng = c1.getService(
'indexEngine'
);
if
(ng && ng.isViewDefined) {
localStorage.viewDefinition = ng.viewDefinition;
}
}
function
loadView() {
var
ng = c1.getService(
'indexEngine'
);
if
(ng && localStorage.viewDefinition) {
ng.viewDefinition = localStorage.viewDefinition;
var
cmbRowTotals = wijmo.Control.getControl(
'#RowTotals'
);
if
(cmbRowTotals) {
cmbRowTotals.selectedValue = ng.showRowTotals;
}
var
cmbColTotals = wijmo.Control.getControl(
'#ColTotals'
);
if
(cmbColTotals) {
cmbColTotals.selectedValue = ng.showColumnTotals;
}
var
chkShowZeros = document.getElementById(
'ColTotals'
);
if
(chkShowZeros) {
chkShowZeros.
checked
= ng.showZeros;
}
}
}
function
excelExport() {
var
pivotGrid = wijmo.Control.getControl(
'#indexGrid'
);
var
book = wijmo.grid.xlsx.FlexGridXlsxConverter.save(pivotGrid, {
includeColumnHeaders:
true
,
includeRowHeaders:
true
});
book.sheets[0].name =
'Main View'
;
addTitleCell(book.sheets[0], getViewTitle(pivotGrid.engine));
transposeView(pivotGrid.engine);
var
transposed = wijmo.grid.xlsx.FlexGridXlsxConverter.save(pivotGrid, {
includeColumnHeaders:
true
,
includeRowHeaders:
true
});
transposed.sheets[0].name =
'Transposed View'
;
addTitleCell(transposed.sheets[0], getViewTitle(pivotGrid.engine));
book.sheets.push(transposed.sheets[0]);
transposeView(pivotGrid.engine);
book.save(
'wijmo.olap.xlsx'
);
}
function
getViewTitle(ng) {
var
title =
''
;
for
(
var
i = 0; i <
ng.valueFields.length
; i++) {
if
(i > 0) title +=
', '
;
title += ng.valueFields[i].header;
}
title +=
' by '
;
if
(ng.rowFields.length) {
for
(
var
i = 0; i <
ng.rowFields.length
; i++) {
if
(i > 0) title +=
', '
;
title += ng.rowFields[i].header;
}
}
if
(ng.rowFields.length && ng.columnFields.length) {
title +=
' and by '
;
}
if
(ng.columnFields.length) {
for
(
var
i = 0; i <
ng.columnFields.length
; i++) {
if
(i > 0) title +=
', '
;
title += ng.columnFields[i].header;
}
}
return
title;
}
function
transposeView(ng) {
ng.deferUpdate(
function
() {
var
rows = [],
cols = [];
for
(
var
r = 0; r <
ng.rowFields.length
; r++) {
rows.push(ng.rowFields[r].header);
}
for
(
var
c
=
0
; c < ng.columnFields.length; c++) {
cols.push(ng.columnFields[c].header);
}
ng.rowFields.clear();
ng.columnFields.clear();
for
(
var
r
=
0
; r < rows.length; r++) {
ng.columnFields.push(rows[r]);
}
for
(
var
c
=
0
; c < cols.length; c++) {
ng.rowFields.push(cols[c]);
}
});
}
function
addTitleCell(sheet, title) {
var
cell
=
new
wijmo.xlsx.WorkbookCell();
cell.value
=
title
;
cell.style
=
new
wijmo.xlsx.WorkbookStyle();
cell.style.font
=
new
wijmo.xlsx.WorkbookFont();
cell.style.font.bold
=
true
;
var
row
=
new
wijmo.xlsx.WorkbookRow();
row.cells[0] = cell;
sheet.rows.splice(0, 0, row);
}
function
toggleOutlineMode(e) {
var
pivotGrid
=
wijmo
.Control.getControl(
'#indexGrid'
);
pivotGrid.outlineMode
= e.target.
checked
;
}
function
toggleShowValueFieldHeaders(e) {
var
pivotGrid
=
wijmo
.Control.getControl(
'#indexGrid'
);
pivotGrid.showValueFieldHeaders
= e.target.
checked
;
}
</script>
}
@section
Settings{
@await
Html.PartialAsync(
"_OptionsMenu"
, optionsModel)
}
@section
Description{
<
p
>
@Html
.Raw(OlapRes.Index_Text4)<
br
/>
@Html
.Raw(OlapRes.Index_Text10)
</
p
>
<
p
>
@Html
.Raw(OlapRes.Index_Text5)</
p
>
}
@section
Summary{
<
p
>
@Html
.Raw(OlapRes.Index_Text6)</
p
>
}