インフラジスティックス・ジャパン株式会社のBlog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

UIコントロール選択ガイド - データグリッド

UIコントロール選択ガイド - データグリッド

このエントリは、「アプリケーション開発のためのUIコントロールガイド」の第2章で述べられているUIコントロール選択ガイドからデータグリッドについて記したものです。 

全体の目次やPDF版のダウンロードについてはエントリの最後をご覧ください。

コントロールの概要

データグリッドは、行列構造を持つテーブルデータを一覧表形式で表示・編集するのに最適なコントロールです。ソートやフィルターなど、ユーザーがデータを理解しやすくなる仕組みが豊富に提供されており、それらを組み合わせてインタフェースを構成します。

代表的なグリッドの種類

  • データグリッド
  • 多段明細グリッド
  • 階層グリッド
  • ツリーグリッド

提供している機能

データグリッドは次のような機能を提供します。

  • セルの仮想化
  • セル編集
  • ソート
  • グループ化
  • フィルター
  • 非バインド列
  • テンプレート
  • 行列非表示
  • 行列固定
  • 行列高さ・幅変更
  • 行列移動
  • 行・列・セル選択
  • 条件付き書式
  • 行セレクター
  • セル結合
  • 集計
  • 複数行ヘッダー
  • 列のグループ化と開閉
  • レイアウトや設定情報の保存・読み込み
  • クリップボード連携(コピー・ペースト)
  • 外部出力(Excel、PDF、CSV)

利用ポイント

  • 複数行レイアウトと列固定など、機能の組み合わせによってはサポートされていない場合があります。あらかじめ利用する機能の組み合わせがサポートされているかをドキュメントで確認しましょう。
  • 最高のパフォーマンスを得るために表示列数と行数(=表示セル数)を適切に決定します。一画面に表示する要素数が増加するとパフォーマンスの悪化につながります。
  • UIの仮想化機能やデータ仮想化機能が提供されている場合は利用を検討しましょう。
  • 表示セル数が多い場合は視認性を確保するため、セルの桁記号や条件付き書式などを積極的に利用しましょう。

対応プラットフォーム 

データグリッドを提供しているプラットフォームは次のとおりです。
(画像をクリック・タップすると製品紹介ページへと遷移します。)

Ultimate UI for Windows Forms  Ultimate UI for WPF  Ignite UI for Angular  Ignite UI for JavaScript - ASP.NET MVC  Infragistics ASP.NET Web Forms  Ignite UI for JavaScript - jQuery

Ignite UI for React  Infragistics Android  Infragistics iOS

Infragistics Xamarin 

スクリーンショット

UIコントロール選択ガイド - データグリッド - 平面データグリッド - 汎用的に利用できる

平面データグリッド - 汎用的に利用できる

UIコントロール選択ガイド - データグリッド - 多段明細グリッド - 列数が多い場合に水平スクロールをせずに行を表示できる

多段明細グリッド - 列数が多い場合に水平スクロールをせずに行を表示できる

UIコントロール選択ガイド - データグリッド - 階層グリッド - 階層ごとに異なる列構造を持つグリッド

階層グリッド - 階層ごとに異なる列構造を持つグリッド

UIコントロール選択ガイド - データグリッド - ツリーグリッド - 全ての階層で同一の列構造を持つグリッド

ツリーグリッド - 全ての階層で同一の列構造を持つグリッド

UIコントロール選択ガイド - データグリッド - 条件付き書式とスパークラインを利用して、視認性を向上

条件付き書式とスパークラインを利用して、視認性を向上

UIコントロール選択ガイド - データグリッド - セルの編集 – 列タイプに応じた専用エディター

セルの編集 – 列タイプに応じた専用エディター

UIコントロール選択ガイド - データグリッド - ソート

ソート

UIコントロール選択ガイド - データグリッド - フィルター(Excelフィルタリング)

フィルター(Excelフィルタリング)

UIコントロール選択ガイド - データグリッド - グループ化

グループ化

UIコントロール選択ガイド - データグリッド - 列固定

列固定

UIコントロール選択ガイド - データグリッド - セル選択

セル選択

UIコントロール選択ガイド - データグリッド - セル結合

セル結合

全体目次およびPDF版のダウンロード

「アプリケーション開発のためのコントロールガイド」ではこのエントリの他にも「有償コントロールを利用する意義」やInfragistics Ultimateで提供しているさまざまなUIコントロールの特性や利用ポイントをまとめた「UIコントロール選択ガイド」をご準備しています。

オンライン版では数週間に渡り1つ1つのトピックについて連載します。

blogs.jp.infragistics.comローカル環境で全文をご覧になりたい場合は、こちらよりダウンロード頂けます。

jp.infragistics.com