グループ化

CollectionViewクラスは、.NETと類似のICollectionViewインタフェースを介してグループ化をサポートしています。グループ化を有効にするには、1つ以上のGroupDescriptionオブジェクトをCollectionView.groupDescriptionsプロパティに追加し、グリッドインスタンス作成時にグリッドのShowGroupsプロパティを必ずtrueに設定します（デフォルト値はfalse）。

GroupDescriptionオブジェクトは柔軟であり、値またはグループ化関数に基づいてデータをグループ化できます。

次の例では、リストから選択するフィールドによってコレクションをグループ化します。グリッドには、項目のコンテンツだけでなく、グループ情報（グループ名とグループ内の金額の平均値）も表示されます。

クライアント側のみで使用できるデータに対してフィルタ処理、ページング、ソートを行う場合は、ItemSourceのDisableServerReadプロパティを必ずtrueに設定してください。

この例ではC1NWindデータソースを使用しますが、これは「クイックスタート」で示されているようにアプリケーション内で設定されたものです。次の図は、グループ化が適用された後のFlexGridを示しています。

FlexGridをグループ化する際のキーになるフィールドをドロップダウンから選択できます。

次のコード例は、FlexGridでCollectionViewを介してグループ化を適用する方法を示します。

コードの場合

GroupingController.cs

C#	コードのコピー
private C1NWindEntities db = new C1NWindEntities(); public ActionResult Index() { return View(db); } public ActionResult Index1() { return View(db); } public ActionResult GridReadCategory([C1JsonRequest] CollectionViewRequest<Products> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, db.Products)); }

コードのコピー

private C1NWindEntities db = new C1NWindEntities();
public ActionResult Index()
{
    return View(db);
}

public ActionResult Index1()
{
    return View(db);
}

public ActionResult GridReadCategory([C1JsonRequest] CollectionViewRequest<Products> requestData)
{
    return this.C1Json(CollectionViewHelper.Read(requestData, db.Products));
}

Grouping.cshtml

ASP.NET
JS

Razor	コードのコピー
<div class="col-md-6"> <select id="groupingFieldNameList" class="form-control"></select> </div> @(Html.C1().FlexGrid().Id("groupingGrid").IsReadOnly(true).AllowSorting(true) .AutoGenerateColumns(true).PageSize(10).Height(500) .Bind(b => b.DisableServerRead(true).Bind(Url.Action("GridReadCategory"))) )

Razor

コードのコピー

<div class="col-md-6">
    <select id="groupingFieldNameList" class="form-control"></select>
</div>

@(Html.C1().FlexGrid().Id("groupingGrid").IsReadOnly(true).AllowSorting(true)
    .AutoGenerateColumns(true).PageSize(10).Height(500)
    .Bind(b => b.DisableServerRead(true).Bind(Url.Action("GridReadCategory")))
)

スクリプト	コードのコピー
<script> function getGroupNames() { return ['ProductID', 'ProductName', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'ReorderLevel']; }; $(document).ready(function () { //グループ化します groupingGrid = wijmo.Control.getControl('#groupingGrid'); cvGrouping = groupingGrid.itemsSource; groupingFieldNameList = document.getElementById('groupingFieldNameList'); groupingFieldNameList.addEventListener('change', groupGrid); // リストを初期化してリストで選択の変更に対応します groupingFieldNameList.innerHTML += '<option value="" selected="selected">グループ化するフィールドを選択してください。。。</option>'; for (var i = 0; i < groupingNames.length; i++) { groupingFieldNameList.innerHTML += '<option value="' + groupingNames[i] + '">' + groupingNames[i] + '</option>'; } }); // FlexGrid にてグループします // CollectionView、グリッド、select要素、と NameListを作成します var cvGrouping = null, groupingGrid = null, groupingFieldNameList = null, groupingNames = getGroupNames(); // グループする設定を更新します function groupGrid() { var gd, fieldName = groupingFieldNameList.value; gd = cvGrouping.groupDescriptions; if (!fieldName) { // グループする設定をすべてクリアします gd.splice(0, gd.length); return; } if (findGroup(fieldName) >= 0) { return; } if (fieldName === 'UnitPrice') { // 価格によるグループする場合、特定の値の代わりに範囲を指定します gd.push(new wijmo.collections.PropertyGroupDescription(fieldName, function (item, propName) { var value = item[propName]; // UnitPrice if (value > 100) return 'Large Amounts'; if (value > 50) return 'Medium Amounts'; if (value > 0) return 'Small Amounts'; return 'Negative Amounts'; })); } else { //特定のプロパティ値によるグループします gd.push(new wijmo.collections.PropertyGroupDescription(fieldName)); } }; // 指定したプロパティ名のグループが既に存在しているかを確認します function findGroup(propName) { var gd = cvGrouping.groupDescriptions; for (var i = 0; i < gd.length; i++) { if (gd[i].propertyName === propName) { return i; } } return -1; }; </script>

スクリプト

コードのコピー

<script>

    function getGroupNames() {
        return ['ProductID', 'ProductName', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'ReorderLevel'];
    };
    $(document).ready(function () {
        //グループ化します

        groupingGrid = wijmo.Control.getControl('#groupingGrid');
        cvGrouping = groupingGrid.itemsSource;
        groupingFieldNameList = document.getElementById('groupingFieldNameList');
        groupingFieldNameList.addEventListener('change', groupGrid);

        // リストを初期化してリストで選択の変更に対応します
        groupingFieldNameList.innerHTML += '<option value="" selected="selected">グループ化するフィールドを選択してください。。。</option>';
        for (var i = 0; i < groupingNames.length; i++) {
            groupingFieldNameList.innerHTML += '<option value="' + groupingNames[i] + '">' + groupingNames[i] + '</option>';
        }
    });
    // FlexGrid にてグループします
    // CollectionView、グリッド、select要素、と NameListを作成します
    var cvGrouping = null,
        groupingGrid = null,
        groupingFieldNameList = null,
        groupingNames = getGroupNames();

    // グループする設定を更新します
    function groupGrid() {
        var gd,
            fieldName = groupingFieldNameList.value;
        gd = cvGrouping.groupDescriptions;
        if (!fieldName) {
            // グループする設定をすべてクリアします
            gd.splice(0, gd.length);
            return;
        }
        if (findGroup(fieldName) >= 0) {
            return;
        }
        if (fieldName === 'UnitPrice') {
            // 価格によるグループする場合、特定の値の代わりに範囲を指定します
            gd.push(new wijmo.collections.PropertyGroupDescription(fieldName, function (item, propName) {
                var value = item[propName]; // UnitPrice
                if (value > 100) return 'Large Amounts';
                if (value > 50) return 'Medium Amounts';
                if (value > 0) return 'Small Amounts';
                return 'Negative Amounts';
            }));
        }
        else {
            //特定のプロパティ値によるグループします
            gd.push(new wijmo.collections.PropertyGroupDescription(fieldName));
        }
    };
    // 指定したプロパティ名のグループが既に存在しているかを確認します
    function findGroup(propName) {
        var gd = cvGrouping.groupDescriptions;
        for (var i = 0; i < gd.length; i++) {
            if (gd[i].propertyName === propName) {
                return i;
            }
        }
        return -1;
    };
</script>