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;
150,308
89,353
125,419
76,901
441,981
119,125
123,950
96,990
116,975
457,040
132,458
132,757
113,301
100,138
478,654
98,222
120,467
110,811
154,111
483,611
98,912
111,706
97,140
121,700
429,458
38,550
126,163
88,379
117,560
370,652
123,717
150,569
156,681
94,881
525,848
131,757
140,605
103,130
160,201
535,693
113,048
83,780
118,672
55,232
370,732
120,091
154,464
144,081
124,710
543,346
105,241
132,761
117,066
106,744
461,812
1,231,429
1,366,575
1,271,670
1,229,153
5,098,827

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