フィルタ処理

.NETと同様に、CollectionViewクラスはICollectionViewインタフェースを介してフィルタ処理をサポートします。フィルタ処理を有効にするには、ビューに入れるオブジェクトを決定する関数をCollectionView.filterプロパティに設定します。

次の図は、FlexGridコントロールにフィルタ処理が適用された後のFlexGridを示しています。

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

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

任意の文字を入力してグリッドデータをフィルタ処理します。たとえば、次の図はeAを入力したときのFlexGridです。

次のコード例は、CollectionViewを使用してFlexGridでフィルタ処理を適用する方法を示します。

コードの場合

FilteringController.cs

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

コードのコピー

 private C1NWindEntities db = new C1NWindEntities();

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

Filtering.cshtml

ASP.NET
JS

Razor	コードのコピー
<div> <input id="filteringInput" type="text" class="form-control app-pad" placeholder="CustomerIDによるフィルタする文字を入力してください"/> </div> <br/> @(Html.C1().FlexGrid().Id("filteringGrid").IsReadOnly(true). AllowSorting(false).AutoGenerateColumns(false) .Bind(b => b.Bind(Url.Action("GridReadCategory")). DisableServerRead(true)) .Columns(columns => columns .Add(c => c.Binding("CustomerID").Header("ID")) .Add(c => c.Binding("CompanyName").Header("会社名")) .Add(c => c.Binding("ContactName").Header("連絡先名")) .Add(c => c.Binding("City").Header("都市")) .Add(c => c.Binding("Country").Header("国名")) .Add(c => c.Binding("Phone").Header("電話番号")) ) )

Razor

コードのコピー

<div>
    <input id="filteringInput" type="text" class="form-control app-pad"
           placeholder="CustomerIDによるフィルタする文字を入力してください"/>
</div>
<br/>
@(Html.C1().FlexGrid().Id("filteringGrid").IsReadOnly(true).
AllowSorting(false).AutoGenerateColumns(false)
    .Bind(b => b.Bind(Url.Action("GridReadCategory")).
DisableServerRead(true))
    .Columns(columns => columns
        .Add(c => c.Binding("CustomerID").Header("ID"))
        .Add(c => c.Binding("CompanyName").Header("会社名"))
        .Add(c => c.Binding("ContactName").Header("連絡先名"))
        .Add(c => c.Binding("City").Header("都市"))
        .Add(c => c.Binding("Country").Header("国名"))
        .Add(c => c.Binding("Phone").Header("電話番号"))
        )
)

スクリプト	コードのコピー
<script> $(document).ready(function () { //フィルタ処理 // collectionview、グリッド、タイムアウトが含むフィルタ、フィルタを入力 // するフィルタを作成します filteringGrid = wijmo.Control.getControl('#filteringGrid'); cvFiltering = filteringGrid.itemsSource; filteringInput = document.getElementById('filteringInput'); // 入力時フィルタを適用します filteringInput.addEventListener('input', filterGrid); }); //フィルタ処理 // collectionview、グリッド、タイムアウトが含むフィルタ、フィルタを入力する // フィルタを作成します var cvFiltering = null, filteringGrid = null, toFilter, filteringInput = null; // collection view に対してフィルタ処理を定義します function filterFunction(item) { var filter = filteringInput.value.toLowerCase(); if (!filter) { return true; } return item.CustomerID.toLowerCase().indexOf(filter) > -1; }; // フィルタを適用します(500 ms のタイムアウトに適用された) function filterGrid() { if (toFilter) { clearTimeout(toFilter); } toFilter = setTimeout(function () { toFilter = null; if (cvFiltering.filter === filterFunction) { cvFiltering.refresh(); } else { cvFiltering.filter = filterFunction; } }, 500); }; </script>

スクリプト

コードのコピー

<script>

    $(document).ready(function () {
  //フィルタ処理
  // collectionview、 グリッド、タイムアウトが含むフィルタ、フィルタを入力
  // するフィルタを作成します
    filteringGrid = wijmo.Control.getControl('#filteringGrid');
    cvFiltering = filteringGrid.itemsSource;
    filteringInput = document.getElementById('filteringInput');
  // 入力時フィルタを適用します
        filteringInput.addEventListener('input', filterGrid);
    });

  //フィルタ処理
  // collectionview、 グリッド、タイムアウトが含むフィルタ、フィルタを入力する
  // フィルタを作成します
    var cvFiltering = null,
        filteringGrid = null,
        toFilter,
        filteringInput = null;

    // collection view に対してフィルタ処理を定義します
    function filterFunction(item) {
        var filter = filteringInput.value.toLowerCase();
        if (!filter) {
            return true;
        }

        return item.CustomerID.toLowerCase().indexOf(filter) > -1;
    };

    // フィルタを適用します(500 ms のタイムアウトに適用された)
    function filterGrid() {
        if (toFilter) {
            clearTimeout(toFilter);
        }

        toFilter = setTimeout(function () {
            toFilter = null;
            if (cvFiltering.filter === filterFunction) {
                cvFiltering.refresh();
            }
            else {
                cvFiltering.filter = filterFunction;
            }
        }, 500);
    };
</script>