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;
92,780
78,994
101,772
84,974
358,520
70,967
105,693
96,946
85,002
358,608
113,067
124,087
170,983
166,486
574,623
82,191
79,437
96,594
169,406
427,628
136,513
121,828
125,737
79,015
463,093
119,818
90,642
99,942
156,841
467,243
144,026
135,275
175,110
136,988
591,399
67,116
169,642
114,699
110,039
461,496
144,542
85,355
88,961
75,245
394,103
121,470
155,638
104,731
93,215
475,054
121,924
163,293
106,926
118,182
510,325
1,214,414
1,309,884
1,282,401
1,275,393
5,082,092

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