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;
119,443
98,256
113,263
125,579
456,541
98,163
53,938
114,370
141,768
408,239
96,713
123,045
80,140
132,970
432,868
199,994
125,065
125,074
118,964
569,097
191,433
85,395
191,887
119,308
588,023
109,221
99,339
87,496
89,440
385,496
51,306
80,256
83,156
103,648
318,366
139,967
130,970
122,518
103,163
496,618
121,965
84,787
82,818
140,847
430,417
90,183
76,057
94,052
96,630
356,922
123,304
59,958
131,531
81,936
396,729
1,341,692
1,017,066
1,226,305
1,254,253
4,839,316

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