Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
ASP.NET WebDataGrid 動的にセルと行のスタイルを変更する

WebDataGrid のセルと行のスタイルを動的に変更する方法をご紹介します。

WebDataGrid ではアプリケーション スタイリング フレームワークを用意しておりますので簡単にスタイリングができますが、特定のセルや行のみのスタイルを変更する必要が生じることもあります。

WebDataGrid では CSS を用いたスタイリングを想定して設計されていますので、このようなシナリオではセルやレコードなどのエレメントに配色する CSS を用意して該当エレメントに割り当てる実装を行います。

 

1.CSS の用意

まずはセルと行に適用するスタイルを用意します。セルと行それぞれの要素を確認するには、IE 開発者ツールや Firebug が非常に便利です。要素の確認方法はこちらの記事に解説がございます。
MyCell クラスと MyRow クラスを用意して、
セルと行の前景色と背景色を指定します。



2.CSS の適用

続いて用意した CSS クラスをコードビハインドでセルと行に適用します。 行やセルの要素はスタイリング用に CssClass プロパティを公開していますので、このプロパティに先ほど用意した CSS クラスを割り当てます。

ここでは行の初期化時に起きる InitializeRow イベントを利用していますが、ボタンクリックイベントなどでも同様の実装ができます。


C Sharp

Visual Basic .NET



3.実行結果

特定のセルや行のスタイルを変更することができました!

WebDataGrid

 

 

 

 

 

 

 

 

 

 

 今回はセルと行の前景色と背景色を変更しましたが、フォントスタイルやアラインメントなども変更することができます。また、セルと行以外のエレメントと対応する CSS に関する情報はWebDataGrid のスタイル設定をご覧下さい。

サンプル:
WebDataGrid_CellRowStyling_CS.zip
WebDataGrid_CellRowStyling_VB.zip


関連情報:
WebDataGrid の機能は多岐にわたります。よくお問い合わせ頂く内容につきましては一部このブログでも実装方法や設定方法を紹介させていただいております。是非ご活用ください。

WebDataGrid 利用方法一覧
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2013/08/15/26213.aspx

 

 

 NetAdvantage トライアル版ダウンロード
NetAdvantage ダウンロード

Posted: 07 Jun 2013, 16:29
Filed under: , ,

Comments

Yuki Mita said:

WebDataGrid ではクライアントサイド、サーバーサイドの両方で選択セルや選択行の情報を取得することができます。今回はセルや行が選択された際にクライアントサイドで情報取得する方法をご紹介します。

# July 10, 2013 2:14 AM

Yuki Mita said:

NetAdvantage for ASP.NET でのクライアントサイドプログラミング Tips です。JavaScript コーディングでの便利機能をご紹介します。JavaScript での開発を始める際に是非ご一読いただければと思います。

# July 12, 2013 2:22 AM

Yuki Mita said:

様々なシナリオにおいて、クライアントサイドでグリッドの行やセル、列を取得する必要が生じます。今回は JavaScript でこれら情報を取得する方法をまとめました。 WebDataGrid にはこれらオブジェクトを取得するにあたり、インデクサや列キーなどを利用することができる

# July 17, 2013 12:02 AM

Yuki Mita said:

グリッド上でクリックやダブルクリック時に何らかの処理を行うというシナリオはよくあるかと思います。 WebDataGrid ではクライアントサイドイベントとして Click イベント 、 DoubleClick

# July 19, 2013 4:26 AM

Yuki Mita said:

WebDataGrid ではデフォルトの状態で列幅よりも長いセルの値を列幅に応じて自動改行し、全ての情報を画面上に表示する様に動作します。但し、状況によってはセルの値を改行せずに一部のみを表示する状態を実現したいケースも出てきます。このような場合、WebDataGrid

# July 23, 2013 10:57 PM

Yuki Mita said:

WebDataGrid に DataTable データをバインドしたシナリオにおける JavaScript API による行の追加と削除をご紹介します。 1.準備 - 機能の有効化 WebDataGrid

# July 29, 2013 9:10 PM

Yuki Mita said:

顧客企業一覧や商品一覧などをグリッドに表示する際に、顧客企業や商品に関するウェブサイトへのリンクも含めたい場面はよくあります。WebDataGrid では TemplateDataField にハイパーリンクを表示するコントロールを埋め込むことでリンク表示を実現することができます。

# August 2, 2013 4:59 AM

Yuki Mita said:

グリッドでのデータ更新のタイミングはシナリオに応じて様々ですが、例えば行の編集を終えた後であったり、変更したい全てのセルの編集を終えた後などが考えられます。WebDataGrid ではデフォルト状態で行の編集後にデータ更新を行いますが、プロパティ設定により任意のタイミングで一括更新を行うこともできるようになっています。今回は一括更新の利用方法をご紹介します。

# August 8, 2013 4:46 AM
Anonymous comments are disabled