CodeZine(コードジン)

特集ページ一覧

ASP.NETでユーザにやさしい高機能なUIを持つ表を実装する

Infragistics NetAdvantageチュートリアル その2 - UltraWebGridのさまざまな機能

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/08/02 11:05

Infragistics NetAdvantageファミリー製品は、Windows Forms、ASP.NET、そして、Windows Presentation Foundationに対応した、高度なユーザーインターフェースを提供するコンポーネント群で、使い慣れた画面操作をユーザーに提供するサポートをします。今回は、ASP.NET用として提供されているコンポーネントの中から、UltraWebGridコントロールに注目して、その代表的な機能を紹介します。

目次

はじめに

 インフラジスティックス社の提供するInfragistics NetAdvantageファミリー製品は、マルチプラットフォームでWindows Forms、ASP.NET、そして、Windows Presentation Foundationに対応した商用アプリケーションユーザーインターフェースの構築をサポートするプレゼンテーションレイヤコンポーネント群であり、その高度なユーザーインターフェースコントロールは使い慣れた画面操作をユーザーに提供するサポートをします。

 今回は、ASP.NET用として提供されているコンポーネントの中から、UltraWebGridコントロールに注目して、その代表的な機能を紹介したいと思います。

対象読者

 Visual Basic 2005、Visual C# 2005を使ってプログラムを作ったことがある人。

必要な環境・コンポーネントのインストール

 必要な環境・コンポーネントのインストールについては、『高度なUIのグリッドを使ってAJAXの非同期データ更新を行う』を参考にしてください。

UltraWebGridの機能

 UltraWebGridは、いわゆる「表形式」のコンポーネントです。一つ一つの機能を詳しく紹介したいところですが、UltraWebGridには多くの機能が含まれているため、かなり膨大なページ数が必要になってしまいます。少々残念ではありますが、ここでは、とりわけ便利に利用できる機能について見ていくことにしましょう。

 これらの機能は、製品と一緒に提供されているサンプルプログラムの中から、いくつかを選んで紹介します。ファイル名を付記しておきますので、もし詳細を確認したいときは、該当のサンプルプログラムを参照してみてください。インストール時の既定のフォルダとしては、「C:\Program Files\Infragistics\NetAdvantage for.NET(JA)2006 Volume 1 CLR 2.0\ASP.NET\Samples」の下にC#版(CS)、Visual Basic版(VB)のそれぞれのフォルダが用意されています。

データ入力

セルのエディット(WebTextEditors/CellEditors/CellEditors.aspx)

 .NET FrameworkのDataGridViewでは、グリッドに直接データを入力することができません。面倒ですが、いったん入力用のモードに切り替える必要があります。これはこれで理にかなった仕組みなのですが、Excelなどの入力に慣れたユーザーにとっては扱いづらいものです。UltraWebGridには、セルとしてWebNumericEditやWebCurrencyEdit、WebMaskEditといった入力用のコントロールを利用する機能があります。これにより、直接入力を行いながら、実際に入力される内容を細かく制御できます(図1)。

 このサンプルプログラムでは、データを入力したいセルをダブルクリック、もしくは、セルを選択した状態で[Enter]キーを押下することにより、入力を開始します。日付や数値、通貨の入力では、NumericUpDownコントロールのようにスピンボタンが表示され、ボタンをクリックすることでも入力が行えます。

図1 - セルのエディット
図1 - セルのエディット

データの検証(WebGrid/GridValidation/gridvalidation.aspx)

 データの入力が行えるとすると、そのあとに必要になるのが入力されたデータの検証(バリデーション)です。UltraWebGridには、当然、このあたりの機能も備えられています。先ほどのセルのエディットのサンプルプログラムでは、セルに入力用のコントロールを関連付けました。同じように、今度はセルに検証用のコントロールを関連付けています。

 このとき、ASP.NET標準の検証コントロールが利用できます。このサンプルプログラム(図2)では、郵便番号と電話番号の入力を検証するRegularExpressionValidatorコントロールと、入力を必須とするRequiredFieldValidatorコントロールを利用しています。期待した入力が行われなかったときは、(図2)のように入力を促すメッセージが表示されます。このとき、データの検証はクライアント側で行われるので、サーバとの無駄な通信は発生しません。

図2 - データの検証
図2 - データの検証

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

著者プロフィール

  • こだかかおる(コダカカオル)

    Microsoft Most Valuable Professional Visual Developer - Visual C# .NETによるアプリケーション開発を中心に、IT全般について何でもやるソフトウェアエンジニア。更新をさぼりがちなWebサイトはこちら(http://www.antoin...

バックナンバー

連載:Infragistics NetAdvantageチュートリアル

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5