機能

スライサー

スライサー

スライサー コントロールを使用すると、 PivotField オブジェクトに適用されているフィルタを簡単に編集できます。

機能

スライサー コントロールをカスタマイズして、ヘッダの表示/非表示、 各項目の横にあるチェックボックスの表示/非表示、および複数項目の選択を許可するかどうかを指定できます。

ヘッダーを表示 
チェックボックスを表示 
複数選択を許可 

説明

スライサー コントロールを使用すると、 PivotField オブジェクトに適用されているフィルタを簡単に編集できます。

ユーザーがクリックして値に基づいてデータをフィルター処理できるボタンを提供し、現在のフィルター処理状態を示します。 これにより、フィルター処理されたPivotGrid コントロールおよびPivotChart コントロールに表示される内容を理解しやすくなります。

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);
        }
    }
}
@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(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 Description{
                      @Html.Raw(Resources.Olap.Slicer_Desc)

}
@section Summary{                      
    <p>
        @Html.Raw(Resources.Olap.Slicer_Summary)        
    </p>

}