FlexGrid for ASP.NET MVC

FlexGrid
表形式のデータを表示するためのグリッドコントロールです。編集、セル結合、列の移動、ソート、フィルタリング、グループ化など、グリッドに必要なすべての機能を備えています。また、条件付き書式やセル単位での外観のカスタマイズなど、柔軟なデザイン設定が可能です。

オンラインデモ

ASP.NET MVC Control Explorer

FlexGridをはじめ、ASP.NET MVC用コンポーネントのさまざまな機能をお試しいただけます。一覧からコンポーネントを選択して、各機能の動作やソースコードを確認できます。

Control Explorer

デモを見る (ASP.NET 4版 | ASP.NET Core版

FlexGrid入門

FlexGridを初めて使用する際、参考にしてください。設定の手順やソースコードをご紹介しています。

デモを見る (ASP.NET 4版 | ASP.NET Core版

機能/特長

編集

Excelのようにセル内で編集することができます。F2キーを押すかセルをダブルクリックすると、編集を開始します。また、セルが選択された状態でキー入力しても、編集を開始できます。編集の可否は、グリッド、列、行、セル単位で設定可能です。

画像「編集」

バッチ編集

ユーザーが複数の項目を更新、作成、削除した後で、変更されたデータのコミットを一度で行うことができます。

フィルタリング

組み込みのフィルタリング画面を表示して、条件に一致する行をフィルタリングして表示することができます。AND演算子とOR演算子を使用して、2つのフィルタ条件を組み合わせて指定可能です。

画像「フィルタリング」

グループ化

同じ値を持つデータをグループ化して表示することができます。グループヘッダーでは合計値や平均値などの集計データを表示可能で、ヘッダーをクリックするとグループを展開/縮小して表示できます。

画像「グループ化」

カスタムセル

セルの表示内容を任意にカスタマイズすることができます。書式やスタイルを設定したり、セルに画像やグラフなどのコントロールを表示することも可能です。

画像「カスタムセル」

セル結合

同じ値を持つセルを自動的に結合して表示できます。列ヘッダーや行ヘッダーも結合可能です。

画像「セル結合」

ツリー表示

親子関係を持つ階層的なデータを設定すると、展開縮小可能なツリー形式で表示することができます。

画像「ツリー表示」

ページング

グリッドを複数のページに分けて表示できます。ページを移動するためのUIも提供されます。

画像「ページング」

セルの選択方法

Excelのように、マウスやキーボードを使ってセルを選択できます。セルの選択方法は、1行、複数行、1つのセル、複数のセル、無効のいずれかに設定することができます。

画像「セルの選択方法」

行と列の固定

Excelのように、グリッドのスクロール時に行と列を固定することができます。

画像「行と列の固定」

右から左へのレイアウト

アラビア語やヘブライ語のような言語で使用される、右から左へのレイアウトをサポートします。列は右から左に向かって配置され、文字列は既定で右寄せで表示されます。

画像「右から左へのレイアウト」

仮想スクロール

仮想スクロールを有効にすると、遅延やちらつきを発生させずに、スクロール時にオンデマンドでデータを取得します。

クライアント側API

サーバー側APIに加えて、豊富なクライアント側APIも提供されます。ネットワーク通信を行うことなく、クライアント側でソート、グループ化、フィルタリングなどの処理を行うことができます。

列の操作

列のソートやサイズ変更をクライアント側で行うことができます。また、ソートやフィルタリング処理は、標準的なUIを使用して直感的に行われます。

画像「列の操作」