グループ化

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

Grouping.cshtml

ASP.NET Core
JS

HTML	コードのコピー
<div class="col-md-6"> <select id="groupingFieldNameList" class="form-control"></select> </div> <c1-flex-grid id="groupingGrid" auto-generate-columns="false" is-read-only="true" allow-sorting="true" page-size="10" height="500"> <c1-items-source source-collection="@Model" disable-server-read="true"></c1-items-source> </c1-flex-grid>

HTML

コードのコピー

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

<c1-flex-grid  id="groupingGrid" auto-generate-columns="false"
               is-read-only="true" allow-sorting="true" page-size="10" height="500">
    <c1-items-source source-collection="@Model" disable-server-read="true"></c1-items-source>
</c1-flex-grid>

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>

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>