Infragistics ASP.NET Drag and Drop Framework を使用する方法

Net Advantage for ASP.NET 2009 Volume 1 より Drag And Drop Framework を提供しています。ドラッグ アンド ドロップ機能を使用するアプリケーションを作成することとても簡単です。この記事で Drag and Drop Framework の概要を説明し、WebDataGrid の機能を紹介します。

前提条件

このサンプル アプリケーションは Infragistics NetAdvantage WebClient 10.1 で作成されます。トライアル版ダウンロード リンク：http://jp.infragistics.com/dotnet/netadvantage/aspnet.aspx#Downloads (NetAdvantage for Web Client 2010 Vol. 1 製品のみ)

Drag and Drop Framework を使用するために、スクリプト参照が必要です。これは完全にクライアント側のフレームワークであるため、開発者は Infragistics NetAdvantage for ASP.NET アセンブリの適切なスクリプト名へ参照を追加する必要があります。スクリプトは Infragistics.Web.UI.SharedScripts.igDragDrop.js です。NetAdvantage for ASP.NET のビルド 20091.1015 (NetAdvantage for ASP.NET バージョン 9.1 の RTM ビルド) 以降のバージョンで同じです。このスクリプトへの参照を追加する方法は？以下のようにスクリプト マネージャーと登録します。

<asp:ScriptManager runat="server" ID="smMain">

        <Scripts>

            <asp:ScriptReference

        Assembly="Infragistics35.Web.v10.1,

Version=10.1.20101.1011,

Culture=neutral,

PublicKeyToken=7DD5C3163F2CD0CB"

        Name="Infragistics.Web.UI.SharedScripts.igDragDrop.js" />

        </Scripts>

    </asp:ScriptManager>

クライアント側のみのフレームワークは、サーバー制御なしで使用できます。このチュートリアルでは、ソース要素は WebDataGrid、ターゲット要素には簡単な HTML リストを使用します

WebDataGrid で複数行を選択し、行を項目のリストにドラッグして、選択した行の指定した列をドロップした要素の値と更新します。

以下の手順を実行してください。

1.       ドラッグ アンド ドロップ動作を登録します (上記参照)。

2.       ドラッグ アンド ドロップ動作をクライアントでアプリケーション初期化ステージに初期化します。

3.       カスタム マークアップとカスタム データ オブジェクト (Rows のコレクション) をアタッチするために DragStart イベントを処理します。

4.       データ オブジェクトで操作を実行するために Drop イベントを処理します。

すべてのカスタム JavaScript コードは、アタッチされた WebApplication (ASP.NET AJAX 有効な WebApplication) のルート フォルダーの “dragdrop.js” ファイルにあります。このファイルの最後の行はカスタム JavaScript 初期化ロジックの登録を含みます。

Sys.Application.add_init(appLoaded);

appLoaded は dragdrop.js の上に定義した “appLoaded()” 関数への関数参照です。ドラッグ アンド ドロップ動作のインスタンスを作成する必要があります。

_ddb = new $IG.DragDropBehavior();

次、ソースとターゲット要素を登録します。”addSourceElement(domElement)” および “addTargetElement(domElement, (optional) includeChildren: Boolean)” を使用します。

ソースとターゲットを登録した後で、この例の必要なイベントをサブスクライブします。これは DragDropEvents プロパティによって設定されます。

var events = _ddb.get_events();

events.addDragStartHandler(dragStart);

events.addDropHandler(dropHandler);

dragStart と dropHandler は dragdrop.js ファイルで定義されたカスタム ハンドラーの関数名です。ではここでハンドラーを詳しく見てみましょう。

function dragStart(sender, evntArgs)

{

    var grid = $find("WebDataGrid1");

    var manager = evntArgs.get_manager();               

   

    /* 選択動作オブジェクトから WebDataGrid のすべての選択した行を取得します */

    var selRows = grid.get_behaviors().get_selection().get_selectedRows();

   

    /* ドラッグされる視覚的なマークアップを作成します */

    var dragMarkup = createVisualTip(selRows);

   

    /**/

    _ddb.set_dragMarkup(dragMarkup);

    _ddb.set_dragMarkupOpacity(80);

   

    manager.set_dataObject(selRows);

}

Infragistics Drag and Drop 動作はドラッグされているときにカスタム マークアップを指定するオプションを提供します。デフォルトでは、この動作は DragSource として設定された一番近い HTML 要素のマークアップの「スナップショット」を取得します。この場合では、DragSource は RowSelectors のみです。すべての行セレクターをドラッグ ソースとして設定しました。明示的にドラッグ マークアップを指定しない場合、ドラッグを始めるセル (行セレクター) のみがドラッグされているセルとして表示されます。ユーザー インタラクションを向上するために、WebDataGrid で選択したすべての行の HTML コピーを作成するカスタム ヘルパー メソッド “createVisualTip(selRows)” を作成しました。

ドラッグ アンド ドロップ動作を定義する最後の手順です。これは dropHandler です。

function dropHandler(source, evntArgs)

{  

    /* DragDropManager への参照を取得します */

    var manager = evntArgs.get_manager();

    /* マネージャーからターゲットの HTML DOM 要素への参照を取得します */

    var target = manager.get_targetElement();

    var newCityName = target.innerText;

    /* DataObject への参照を取得します

       DragStart ハンドラーで追加したため、DataObject は選択した行のコレクションです

    */

    var selRows = manager.get_dataObject();

    for(var i = 0; i < selRows.get_length(); i++)

    {

        /* コレクションの各行の City 列を更新します */

        var row = selRows.getItem(i);

        row.get_cellByColumnKey('City').set_value(newCityName, newCityName);

    }

}

複雑なドラッグ アンド ドロップのシナリオが数行の JavaScript コードで実装することができます。