Features

Slicer

Slicer

The Slicer control provides a quick way to edit filters applied to PivotField objects.

Features

Overview
Slicer
Remote Bind
DataEngine Service(DataEngine)
DataEngine Service(DataSource)
DataEngine Service(SSAS)
SSAS (OLAP Cube)
Calculated Aggregates
Select to filter
Product:Aoba;Sales:0;
Product:Olap;Sales:0;
Product:Wijmo;Sales:0;
Product:Xuni;Sales:0;
Sales:0;
116,853
104,574
136,521
87,879
445,827
77,028
125,669
147,137
83,469
433,303
116,467
141,104
46,093
103,980
407,644
89,347
162,318
112,377
112,783
476,825
137,281
98,583
93,404
75,340
404,608
136,416
83,302
129,489
153,889
503,096
145,431
109,997
124,166
64,357
443,951
123,926
113,372
83,619
121,641
442,558
51,349
91,333
111,133
108,709
362,524
127,033
134,440
115,023
114,249
490,745
104,703
102,783
116,331
160,606
484,423
1,225,834
1,267,475
1,215,293
1,186,902
4,895,504

You can customize the Slicer control to hide or show a header, to hide or show checkboxes next to each item, and to allow select multi item or not :

Show Header 
Show Checkboxes 
Allow multi select 

Description

The Slicer control provides a quick way to edit filters applied to PivotField objects.

It provides buttons the user can click to filter data based on values and indicates the current filtering state, which makes it easy to understand what is shown in filtered PivotGrid and PivotChart controls.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
using OlapExplorer.Models;
using System.Collections;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Collections.Generic;
using C1.Web.Mvc.Olap;
  
namespace OlapExplorer.Controllers.Olap
{
    public partial class OlapController : Controller
    {
        // GET: PivotGrid
        public ActionResult Slicer()
        {
            return View(Data);
        }
    }
}
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
65
66
67
68
69
70
71
72
73
74
75
@model IEnumerable<ProductData>
@{
    ClientSettingsModel optionsModel = ViewBag.DemoOptions;
}
  
<c1-pivot-engine id="indexEngine">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-view-field-collection c1-property="RowFields" items="Country"></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-3 col-md-3">
        <c1-slicer id="slicer" pivot-engine-id="indexEngine" show-header="true" header="@OlapRes.Slicer_Text4" field="Country" show-checkboxes="true"></c1-slicer>
    </div>
    <div class="col-sm-9 col-md-9">
        <c1-pivot-grid id="indexGrid" items-source-id="indexEngine"></c1-pivot-grid>
    </div>
</div>
<p>
    @Html.Raw(OlapRes.Slicer_Text0)
</p>
  
@Html.Raw(OlapRes.Slicer_Text1)&nbsp;<input id="showHeader" type="checkbox" checked="checked" onchange="showHeader()" /><br />
@Html.Raw(OlapRes.Slicer_Text2)&nbsp;<input id="showCheckbox" type="checkbox" checked="checked" onchange="showCheckbox()" /><br />
@Html.Raw(OlapRes.Slicer_Text3)&nbsp;<input id="multiSelect" type="checkbox" onchange="setMultiSelect()" /><br />
  
<p></p>
  
@section Scripts{
    <script type="text/javascript">
        function showHeader() {
            var slicer = wijmo.Control.getControl("#slicer");
            var checkbox = document.getElementById("showHeader");
            slicer.showHeader = checkbox.checked;
        }
  
        function showCheckbox() {
            var slicer = wijmo.Control.getControl("#slicer");
            var checkbox = document.getElementById("showCheckbox");
            slicer.showCheckboxes = checkbox.checked;
        }
  
        function setMultiSelect(isSliderButton) {
            var slicer = wijmo.Control.getControl("#slicer");
            var checkbox = document.getElementById("multiSelect");
            if (isSliderButton) {
                checkbox.checked = slicer.multiSelect;
            } else {
                slicer.multiSelect = checkbox.checked;
            }
        }
  
        //slicer button click to change 'Allow multi select' checkbox
        $(document).ready(function () {
            $("#slicer button").on("click", function (e) {
                setMultiSelect(true);
            });
        });
    </script>
}
@section Settings{
        @Html.Partial("_OptionsMenu", optionsModel)
}
@section Description{
    @Html.Raw(OlapRes.Slicer_Desc)
  
}
@section Summary{
    <p>
        @Html.Raw(OlapRes.Slicer_Summary)
    </p>
  
}