Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
NetAdvantage for ASP.NET クライアントサイドプログラミング Tips

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

 

1.コントロールインスタンスの取得方法

Microsoft Ajax Library の $find メソッドにコントロールの ID を指定することでコントロールインスタンスを取得することができます。

// WebdataGrid1 への参照を取得
var grid = $find("WebDataGrid1");

 

2.メソッドの確認方法

アプリケーション開発では、デバッグ実行時にウォッチウィンドウ内でメソッドを確認したい場面はよくあると思います。Internet Explorer と Firefox(Firebug)での確認方法をご紹介します。

Internet Explorer(Visual Studio デバッガ)の場合:
コントロールを取得し、prototype 配下の Methods コレクションから確認することができます。スクリーンショットの「値」列には引数の有無も表示されていますので分かりやすいですね!
WebDataGrid methods

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Firebug(Firefox)の場合:
Internet Explorer と同様にウォッチウィンドウを開きます。Firebug では IE のように prototype という項目は表示されませんが、コントロールインスタンス配下に直接メソッドを確認していくことができます。また、Firebug ではインテリセンスが有効ですので、$find("WebDataGrid1") 配下に探しているメソッドの先頭部分を入力することで候補を表示することもできます。
Firefox debug

 

 

 

 

 

 

 

 

 

 

 

 

3.WebScriptManager 利用による IntelliSense 利用

通常 JavaScript コーディング時には IntelliSense を利用することができませんが、WebScriptManager を利用することでNetAdvantage コントロールの持つメソッドを候補としてリストアップしてくれます!!

使い方は至って簡単です。ScriptManager の代わりに WebScriptManager を配置し、以下のようにコーディングします。

$IG.WebDataGrid.find("WebDataGrid1")

続いてドット(.)を入力するとするとこのようにメソッドの候補が表示されます。

行取得の場合
WebScriptManager IntelliSense

 

 

 

 

 

 





列取得の場合
WebScriptManager IntelliSense

 

 

 

 

 

 

 

 

WebScriptManager の IntelliSense サポートは、オンラインヘルプにも解説がございます。
JavaScript IntelliSense のサポート

 

今回ご紹介した確認方法やツールを利用して、効率よく実装していただけると思います。特に最後にご紹介した WebScriptManager は NetAdvantage コントロールの持つメソッドをリストアップしてくれるので特におすすめです。

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

 
WebDataGrid 関連記事:

その他 WebDataGird 関連の記事はこちらをどうぞ。

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

Comments

Yuki Mita said:

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

# July 17, 2013 12:01 AM

Yuki Mita said:

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

# July 19, 2013 4:26 AM

Yuki Mita said:

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

# July 23, 2013 10:58 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

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 1:17 AM

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 2:39 AM
Anonymous comments are disabled