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;
84,686
128,313
116,940
126,810
456,749
108,734
80,286
129,644
131,413
450,077
121,500
97,984
93,760
156,171
469,415
87,863
118,888
147,038
105,308
459,097
99,094
62,291
87,834
111,744
360,963
61,204
139,203
100,747
109,855
411,009
128,090
103,605
119,502
111,710
462,907
97,304
134,043
101,400
85,375
418,122
134,554
132,555
100,371
115,544
483,024
124,577
114,491
110,471
144,168
493,707
95,558
90,675
116,385
141,514
444,132
1,143,164
1,202,334
1,224,092
1,339,612
4,909,202

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