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;
128,521
181,723
101,923
116,051
528,218
170,703
100,859
145,570
122,709
539,841
138,316
99,675
231,689
127,711
597,391
94,936
135,981
103,279
91,568
425,764
130,468
98,591
66,992
135,140
431,191
119,379
102,410
137,907
127,371
487,067
93,368
73,801
67,700
96,626
331,495
123,326
79,057
77,994
89,691
370,068
100,509
85,141
137,736
84,547
407,933
115,151
127,076
125,248
107,044
474,519
103,833
121,122
87,761
92,435
405,151
1,318,510
1,205,436
1,283,799
1,190,893
4,998,638

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>
  
}