SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

データベースのデータを直線ゲージで表示するASP.NET アプリケーションの作成

C1LinearGaugeコントロールとC1GridViewコントロールを使ったアプリケーションの作成

  • このエントリーをはてなブックマークに追加

C1GridViewコントロールの概要

 今回、ゲージを表示する元データに、Accessデータベースのデータを使用しています。ただし、C1LinearGaugeコントロールは直接データベースと連結できないため、一度「GridView for ASP.NET Wijmo」のC1GridViewコントロールを用いて、データベースのデータをグリッドに読み込み、ここからデータを取り出してゲージの各要素を設定する方法をとりました。

 C1GridViewコントロールは、Webページに配置したカスタマイズ可能な表に、データソースのデータを表示するコントロールです。

 対話的にデータを選択、編集、削除、ソートまたはグループ化でき、データを複数のページにわたって表示することができます。

 連結できるデータベースも、Access、SQL Server、Oracle、OLEDBなどのADO.NETでサポートできるデータベース、XMLファイルなどで、データベースデータをWebページで表示したい時に威力を発揮するコントロールです。

C1GridViewコントロールの特徴

 C1GridViewコントロールは以下のような特徴を持っています。

Microsoft GridViewとの互換性

 C1GridViewコントロールはMicrosoft社のGridViewコントロールと高い互換性を持ち、簡単に既存のASP.NETアプリケーションをアップグレードできます。

フィルタリング

 レコードの検索やフィルタなどのエンドユーザーによるカスタム操作用に、列ヘッダーの下の組み込みデータエントリ行をサポートしています。ShowFilterオプションを有効にして簡単にフィルタリングを実現できます。

カスタマイズされたグリッド書式

 直感的な書式設定によって、開発者は任意のグリッドを自動的にカスタマイズできます。列の作成、枠/グリッド線の表示、グリッド内の編集、ソートデータのカスタマイズ、その他さまざまな操作を行うことができます。

編集

 グリッド内のデータを編集して、変更内容を保存または解除できます。

行のマージ

 グリッドを構成し、同一の値を含む行をマージするように設定できます。この機能を使うと、グリッドがすっきりと使いやすくなります。

入力コントロールの組み込み

 Input for ASP.NET Wijmoコントロールをグリッドに接続して、データ入力および対話性を強化することができます。マスク、日付、数値、パーセント、通貨の編集などのエディタをグリッドの任意列に簡単に追加できます。

任意のグリッド列にコントロールや画像を埋め込む

 グリッドの列にチェックボックス、リストボックス、ボタン、画像などを組み込んで表示できます。

コードレスにグリッドのカスタマイズ

 列のコレクション、ページング動作を管理し、コードを記述せずにグリッドの設計を編集できます。C1GridViewコントロールの豊かなデザイン時のサポートにより、Webサイトにカスタマイズされたグリッドの機能を容易に追加することができます。

自動的に列と行のサイズを変更

 プロパティを設定することにより、グリッドがスクロールされたときに、列の一番長いテキストに合わせて自動的に列幅と行高を調整します。特定の行列の自動サイズを有効・無効にすることも可能です。

バンド

 階層構造を作成するための、複数列の列ヘッダーを結合できます。例えば、複数の列ヘッダーを別の広い列ヘッダーの下に配置することも可能です。

グループ化および集計

 アプリケーション実行時にグループヘッダーをクリックすることで、グループの拡張や縮小を有効にしてアウトラインモードに設定できます。グループは初期表示の時に拡張するか、縮小するかを指定できます。グリッドは各グルップヘッダー行の隣に拡張や縮小アイコンを表示します。また、グループ化された行はカウント、総計などの集計データを表示できます。

再利用可能なテンプレート

 プロジェクト内・プロジェクト外で同じ外観の複数のグリッドを作成できるように、グリッドテンプレートを保存してロードできます。

テーマ

 スマートタグをクリックするだけで、6種類のプレミアムテーマ(Arctic、Midnight、Aristo、Rocket、Cobalt、およびSterling)のいずれかを選択して外観を変更します。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成します。

CSS対応

 Cascading Style Sheet(CSS)を使用してカスタムスキンを定義できます。

プロパティビルダー

 グリッドを編集するために、C1GridViewコントロールには「プロパティビルダー」が用意されています。

 プロパティビルダーを使用すれば、C1GridViewコントロールの外観と動作を簡単にカスタマイズできます。プロパティビルダーにアクセスするには、スマートタグにある[C1GridViewタスク]メニューからプロパティビルダーを選択します。

 プロパティビルダーは、以下の5種類のタブで構成されます。

タブ 説明
全般 データソースを表示します。
ここで、ヘッダー、フッター、ソートの各プロパティを設定できます。
表示する列のタイプを指定して、それぞれにプロパティを設定できます
ページング ページングを使用するかどうかを決定できます。
また、その表示方法と表示場所もカスタマイズできます。
書式 フォント、色、グリッドの配置、ヘッダー、フッター、ページャ、
特定の項目および列を含むすべての内容を設定できます。
グループ化 列のグルーピングのプロパティを設定し、
グループヘッダー行とグループフッター行を書式設定し、表示する方法を指定できます。
プロパティビルダー
プロパティビルダー

次のページ
Webページのデザイン

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7063 2013/03/25 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング