Features

Overview

Overview

The PivotEngine component binds to an IEnumerable object.

Features

You can use the viewDefinition property to save and restore view definitions, as shown in the following example:

The PivotGrid control extends the FlexGrid control, so you can export it to any of the formats supported by the extension modules provided with the FlexGrid. The list of the supported formats includes .xlsx, .csv, and .pdf.

For example, clicking the button below creates an Excel file with two sheets: the current view and a transposed version of the current view:

Settings

Description

In this sample, the PivotEngine binds to an IEnumerable object which provides the data to be aggregated. All the data will be transferred to the client. The PivotEngine will calculate the data at the client-side. The PivotPanel control, the PivotGrid control binds the PivotEngine. You can change the view definition in the PivotPanel control. The PivotGrid control reflects the changes in the aggregated data. You can find the detailed raw data shown in a grid by double-clicking a cell in the PivotGrid control.

When the data row count is lower than 10,000, you can use Bind(data) or Bind(url) mode. Otherwise, please use BindService(url) mode.

using OlapExplorer.Models;
using System.Collections;
using System.Web.Mvc;
using System.Linq;
using System.Collections.Generic;
using C1.Web.Mvc.Olap;

namespace OlapExplorer.Controllers.Olap
{
    public partial class OlapController : Controller
    {
        private static IEnumerable Data = ProductData.GetData(1000).ToList();

        private readonly ClientSettingsModel OlapModel = new ClientSettingsModel
        {
            Settings = new Dictionary<string, object[]>
            {
                {"RowTotals", new object[] { ShowTotals.Subtotals, ShowTotals.None, ShowTotals.GrandTotals} },
                {"ColumnTotals", new object[] { ShowTotals.Subtotals, ShowTotals.None, ShowTotals.GrandTotals} },
                {"ShowZeros", new object[] { false, true } }
            }
        };

        // GET: PivotGrid
        public ActionResult Index()
        {
            OlapModel.ControlId = "indexPanel";
            ViewBag.DemoSettingsModel = OlapModel;
            return View(Data);
        }
    }
}
@model IEnumerable<ProductData>
@{
    ClientSettingsModel optionsModel = ViewBag.DemoSettingsModel;
}

@(Html.C1().PivotEngine().Id("indexEngine")
        .Bind(Model)
        .RowFields(pfcb => pfcb.Items("Country"))
        .ColumnFields(cfcb=>cfcb.Items("Product"))
        .ValueFields(vfcb => vfcb.Items("Sales")))

<div class="row">
    <div class="col-sm-4 col-md-4">
        @Html.C1().PivotPanel().Id(optionsModel.ControlId).ItemsSourceId("indexEngine")
    </div>
    <div class="col-sm-8 col-md-8">
        @Html.C1().PivotGrid().Id("indexGrid").ItemsSourceId("indexEngine")
    </div>
</div>
<p>
    You can use the <b>viewDefinition</b> property to save and restore view definitions, as shown in the following example:
</p>
<button type="button" class="btn btn-default" onclick="saveView()">Save View</button>
<button type="button" class="btn btn-default" onclick="loadView()">Load View</button>
<p></p>
<p>
    The <b>PivotGrid</b> control extends the <b>FlexGrid</b> control, so you can export it to any of
    the formats supported by the extension modules provided with the <b>FlexGrid</b>. The
    list of the supported formats includes .xlsx, .csv, and .pdf.
</p>
<p>
    For example, clicking the button below creates an Excel file with two sheets: the current view and a transposed version of the current view:
</p>
<button type="button" class="btn btn-default"
        onclick="excelExport()">
    Export to XLSX
</button>
@section Scripts{
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <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');

            // create book with current view
            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));

            // add sheet with transposed view
            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);

            // save the book
            book.save('wijmo.olap.xlsx');
        }

        // build a title for the current view
        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 () {

                // save row/col fields
                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);
                }

                // clear row/col fields
                ng.rowFields.clear();
                ng.columnFields.clear();

                // restore row/col fields in transposed order
                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]);
                }
            });
        }

        // adds a title cell into an xlxs sheet
        function addTitleCell(sheet, title) {

            // create cell
            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;

            // create row to hold the cell
            var row = new wijmo.xlsx.WorkbookRow();
            row.cells[0] = cell;

            // and add the new row to the sheet
            sheet.rows.splice(0, 0, row);
        }
    </script>
}

@section Description{
    <p>
        In this sample, the <b>PivotEngine</b> binds to an IEnumerable object which provides the data to be aggregated.
        All the data will be transferred to the client. The <b>PivotEngine</b> will calculate the data at the client-side.
        The <b>PivotPanel</b> control, the <b>PivotGrid</b> control binds the <b>PivotEngine</b>.
        You can change the view definition in the <b>PivotPanel</b> control.
        The <b>PivotGrid</b> control reflects the changes in the aggregated data.
        You can find the detailed raw data shown in a grid by double-clicking a cell in the <b>PivotGrid</b> control.
    </p>
    <p>
        When the data row count is lower than 10,000, you can use Bind(data) or Bind(url) mode. 
        Otherwise, please use BindService(url) mode.
    </p>
}
@section Summary{
    <p>
        The PivotEngine component binds to an IEnumerable object.
    </p>
}