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)
Select to filter
Product:Aoba;Sales:0;
Product:Olap;Sales:0;
Product:Wijmo;Sales:0;
Product:Xuni;Sales:0;
Sales:0;
157,773
118,969
132,090
98,750
507,582
97,858
145,087
88,770
100,422
432,137
125,411
94,607
137,706
106,957
464,681
96,798
119,806
119,931
94,052
430,587
147,131
64,559
91,670
131,737
435,097
136,356
103,857
69,757
93,733
403,703
118,541
114,329
110,950
79,520
423,340
136,462
97,395
98,180
92,962
424,999
118,228
106,960
119,235
85,958
430,381
147,832
142,736
117,574
86,326
494,468
127,565
187,024
118,723
120,576
553,888
1,409,955
1,295,329
1,204,586
1,090,993
5,000,863

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 System.Web.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
@model IEnumerable<ProductData>
@{
    ClientSettingsModel optionsModel = ViewBag.DemoSettingsModel;
}
 
@(Html.C1().PivotEngine().Id("indexEngine")
        .Bind(Model)
        .RowFields(pfcb => pfcb.Items("Country"))
        .ColumnFields(cfcb=>cfcb.Items("Product"))
        .ValueFields(vfcb => vfcb.Items("Sales")))
 
 
<div class="row">
    <div class="col-sm-3 col-md-3">
        @(Html.C1().Slicer().Id("slicer").Header(Resources.Olap.Slicer_Text4)
                .PivotEngineId("indexEngine").Field("Country").ShowCheckboxes(true))
    </div>
    <div class="col-sm-9 col-md-9">
        @Html.C1().PivotGrid().Id("indexGrid").ItemsSourceId("indexEngine")
 
    </div>
</div>
 
<p>
    @Html.Raw(Resources.Olap.Slicer_Text0)
</p>
 
                      @Html.Raw(Resources.Olap.Slicer_Text1)&nbsp;<input id="showHeader" type="checkbox" checked="checked" onchange="showHeader()"/><br />
                      @Html.Raw(Resources.Olap.Slicer_Text2)&nbsp;<input id="showCheckbox" type="checkbox" checked="checked"  onchange="showCheckbox()"/><br />
                      @Html.Raw(Resources.Olap.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() {
            var slicer = wijmo.Control.getControl("#slicer");
            var checkbox = document.getElementById("multiSelect");
            slicer.multiSelect = checkbox.checked;
        }
    </script>
}
 
@section Description{
                      @Html.Raw(Resources.Olap.Slicer_Desc)
 
}
@section Summary{                     
    <p>
        @Html.Raw(Resources.Olap.Slicer_Summary)       
    </p>
 
}