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.

header
header
header
header
header

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
using Microsoft.AspNetCore.Mvc;
using WebApiExplorer.Models;
  
namespace WebApiExplorer.Controllers.MVCOlap
{
    public partial class MVCOlapController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.DataSets = OlapData.GetDataSets();
            ViewBag.ShowTotals = OlapData.GetShowTotals();
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
  
@{
    ViewBag.Title = "DataEngine";
    ViewBag.HideFeatures = true;
    ViewBag.DemoDescription = false;
    var webAPIService = Configuration["WebAPIService"] + "api/dataengine";
    var dataSets = (IEnumerable<OlapData>)(ViewBag.DataSets);
    var showTotals = (IEnumerable<string>)(ViewBag.ShowTotals);
}
  
@section Head{
    <script type="text/javascript">
        window['webAPIService'] = '@webAPIService';
    </script>
    <script src="~/Scripts/DataEngine/common.js" type="text/javascript"></script>
}
  
<div class="title-container">
    <p>@Html.Raw(MVCOlap.Index_Text0)</p>
    <p>@Html.Raw(MVCOlap.Index_Text1)</p>
    <p>@Html.Raw(MVCOlap.Index_Text2)</p>
</div>
<div class="container-fluid">
    <div class="row">
        <c1-pivot-engine id="dataSourceEngine" service-url="@(webAPIService + "/complex10")" show-row-totals="None" show-column-totals="None" show-zeros="false">
            <c1-view-field-collection c1-property="RowFields" items="Product,Country"></c1-view-field-collection>
            <c1-view-field-collection c1-property="ValueFields" items="Sales,Downloads"></c1-view-field-collection>
        </c1-pivot-engine>
        <div class="col-sm-4 col-md-4">
            <c1-pivot-panel id="pivotPanel" items-source-id="dataSourceEngine"></c1-pivot-panel>
        </div>
        <div class="col-sm-8 col-md-8">
            <c1-pivot-grid id="pivotGrid" items-source-id="dataSourceEngine" show-selected-headers="All"></c1-pivot-grid>
        </div>
    </div>
</div>
  
<div class="col-lg-12 ui-helper-clearfix content-panel" style="margin-top:20px">
    <p>@Html.Raw(MVCOlap.Index_Text3)</p>
    <dl class="dl-horizontal">
        <dt>@Html.Raw(MVCOlap.Index_Dataset)</dt>
        <dd>
            <c1-combo-box id="cmbDataSets" display-member-path="Name" selected-value-path="Value" selected-index-changed="cmbDataSets_SelectIndexChanged">
                <c1-items-source source-collection="@dataSets"></c1-items-source>
            </c1-combo-box>
        </dd>
        <dt>@Html.Raw(MVCOlap.Index_RowTotals)</dt>
        <dd>
            <c1-combo-box id="cmbRowTotals" selected-index-changed="cmbRowTotals_SelectIndexChanged">
                <c1-items-source source-collection="@showTotals"></c1-items-source>
            </c1-combo-box>
        </dd>
        <dt>@Html.Raw(MVCOlap.Index_ColumnTotals)</dt>
        <dd>
            <c1-combo-box id="cmbColTotals" selected-index-changed="cmbColTotals_SelectIndexChanged">
                <c1-items-source source-collection="@showTotals"></c1-items-source>
            </c1-combo-box>
        </dd>
        <dt>@Html.Raw(MVCOlap.Index_ShowZeros)</dt>
        <dd><input id="chkShowZeros" type="checkbox" onclick="chkShowZeros_CheckedChanged()" /></dd>
    </dl>
</div>