ASP.NET MVC コントロールヘルプ
フィルタ処理
コントロールの使用 > CollectionView > CollectionViewの使用 > クライアント側処理 > フィルタ処理

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

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

クライアント側のみで使用できるデータに対してフィルタ処理、ページング、ソートを行う場合は、ItemSourceDisableServerReadプロパティを必ず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));
 }

Filtering.cshtml

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>