ComponentOne
Web API Explorer ASP.NET Web API Explorer

In this sample, all the data such as the field list in PviotPanel, the aggregated data shown in PivotGrid and the detail raw data for some cell are fetched from the DataEngine server api. We also have a client-side option if you perfer.

In this sample, the PivotPanel control is bound with the DataEngine api. And the PivotGrid control is used to show the aggregated data. When double clicking on some cell in the PivotGrid control, a new grid will pop up to show the detail raw data for the cell.

A list of available fields will show in the PivotPanel, and users will be able to drag fields between summary areas to generate data summaries (also known as "views"). Users can also configure the fields by setting their headers, summary functions, filters, and formats.

The PivotPanel control has properties that allow you to customize the view. Use the controls below to modify the values of these properties and see their effect:

Dataset
Row totals
Column totals
Show Zeros
using System.Web.Mvc;

namespace WebApiExplorer.Controllers
{
    public class Wijmo5OlapController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}
@using WebApiExplorer.Models
@{
    ViewBag.Title = "DataEngine";
    ViewBag.HideFeatures = true;
    ViewBag.DemoDescription = false;
}

@section Head{
    <script type="text/javascript">
        window["webAPIService"] = '@(System.Configuration.ConfigurationManager.AppSettings["WebAPIService"])' + 'api/dataengine';
    </script>
    <script src="~/Scripts/DataEngine/common.js" type="text/javascript"></script>
    <script src="~/Scripts/DataEngine/wijmo5Olap.js" type="text/javascript"></script>
}

<div class="title-container">
    <p>@Html.Raw(Resources.Wijmo5Olap.Index_Text0)</p>
    <p>@Html.Raw(Resources.Wijmo5Olap.Index_Text1)</p>
    <p>@Html.Raw(Resources.Wijmo5Olap.Index_Text2)</p>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-4">
            <div id="pivotPanel"></div>
        </div>
        <div class="col-sm-8 col-md-8">
            <div id="pivotGrid"></div>
        </div>
    </div>
</div>

<div class="col-lg-12 ui-helper-clearfix content-panel" style="margin-top:20px">
    <p>@Html.Raw(Resources.Wijmo5Olap.Index_Text3)</p>
    <dl class="dl-horizontal">
        <dt>@Html.Raw(Resources.Wijmo5Olap.Index_Dataset)</dt>
        <dd><div id="cmbDataSets"></div></dd>
        <dt>@Html.Raw(Resources.Wijmo5Olap.Index_RowTotals)</dt>
        <dd><div id="cmbRowTotals"></div></dd>
        <dt>@Html.Raw(Resources.Wijmo5Olap.Index_ColumnTotals)</dt>
        <dd><div id="cmbColTotals"></div></dd>
        <dt>@Html.Raw(Resources.Wijmo5Olap.Index_ShowZeros)</dt>
        <dd><input id="chkShowZeros" type="checkbox" onclick="chkShowZeros_CheckedChanged()" /></dd>
    </dl>
</div>