Infragistics(R) NetAdvantage(R) Web Client: ASP.NET
コピー、カット、ペースト機能の使用


Glossary Item Box

2007 Volume 1 では、WebGrid のクライアント側機能は、Copy、Cut、および Paste メソッドの追加によって拡張されました。これらのメソッドを使用して、このトピックで説明するようにグリッド間でデータをコピー、切り取り、および貼り付けるための固有のコンテキスト メニューを作成します。

  1. コードの記述を開始する前にコード ビハインドに using/imports のディレクティブを配置します。そうすれば、メンバは完全に記述された名前を常に入力する必要がなくなります。

    Visual Basic の場合:

    Imports Infragistics.WebUI.UltraWebGrid
    Imports Infragistics.WebUI.UltraWebNavigator
    Imports Infragistics.WebUI.Shared   
    

    C# の場合:

    using Infragistics.WebUI.UltraWebGrid;
    using Infragistics.WebUI.UltraWebNavigator;
    using Infragistics.WebUI.Shared;
     
    
  2. テキストボックスから UltraWebMenu™ をフォームにドラッグします。WebMenu の Load サーバー側イベントを接続します。このイベント内で、3 つのメニュー項目(Cut、Copy および Paste)を作成して、メニューがショートカット メニューとしても知られているポップアップ メニューになるように、WebMenuTarget プロパティを設定します。

    Visual Basic の場合:

    Private Sub UltraWebMenu1_Load(ByVal sender As Object, _
      ByVal e As System.EventArgs) Handles UltraWebMenu1.Load
    	Me.UltraWebMenu1.WebMenuTarget = WebMenuTarget.PopupMenu
    	Me.UltraWebMenu1.Items.Add("Copy")
    	Me.UltraWebMenu1.Items.Add("Paste")
    End Sub
    

    C# の場合:

    private void UltraWebMenu1_Load(object sender, System.EventArgs e)
    {
    	this.UltraWebMenu1.WebMenuTarget = WebMenuTarget.PopupMenu;
    	this.UltraWebMenu1.Items.Add("Copy");
    	this.UltraWebMenu1.Items.Add("Cut");
    	this.UltraWebMenu1.Items.Add("Paste");
    }
    
    
  3. Page Load イベントで、両方の WebGrid コントロールをコードのサンプル データにバインドします。

    Visual Basic の場合:

     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
            Handles Me.Load
    
            If Page.IsPostBack Then Return
    
            Me.UltraWebGrid1.DataSource = CreateData()
            Me.UltraWebGrid1.DataBind()
            Me.UltraWebGrid2.DataSource = CreateData()
            Me.UltraWebGrid2.DataBind()
    
     End Sub
    
     Private Function CreateData() As DataTable
    
            Dim dtData As New DataTable
            dtData.Columns.Add("CustomerID", GetType(String))
            dtData.Columns.Add("CustomerName", GetType(String))
    
            For i As Integer = 1 To 5
                Dim dr As DataRow = dtData.NewRow()
                dtData.Rows.Add(dr)
            Next i
    
            dtData.AcceptChanges()
            Return dtData
    
     End Function
    

    C# の場合:

     protected void Page_Load(object sender, EventArgs e)
     {
            if (Page.IsPostBack)
                return;
            this.UltraWebGrid1.DataSource = CreateData();
            this.UltraWebGrid1.DataBind();
            this.UltraWebGrid2.DataSource = CreateData();
            this.UltraWebGrid2.DataBind();
     }
    
     private DataTable CreateData()
     {
            DataTable dtData = new DataTable();
    
            dtData.Columns.Add("CustomerID", typeof(string));
            dtData.Columns.Add("CompanyName", typeof(string));
    
            for (int i = 1; i <= 5; i++)
            {
                DataRow dr = dtData.NewRow();
                dtData.Rows.Add(dr);
            }
    
            dtData.AcceptChanges();
            return dtData;
      }
    
    
  4. UltraWebGrid1 の InitializeLayout イベントでは、切り取り、コピー、貼り付けを機能させるために必要なプロパティを設定します。UltraWebGrid1 では、その選択プロパティがひとつのセルのみを選択するように設定されており、CellClickActionDefault プロパティが、エンド ユーザーがセルをクリックしたときにセルを選択するように設定されていることを確認します。また、SelectedRowStyleDefault プロパティの背景色を LightBlue に設定する必要があり、これによってどのセルが選択されているかを知ることができます。UltraWebGrid2 では、3 つの列を追加して、単一セルの選択が可能なように SelectTypeCellDefault を設定します。セルを更新することができるようにするには、AllowUpdateDefault プロパティを Yes に設定します。

    Visual Basic の場合:

    Private Sub UltraWebGrid1_InitializeLayout(ByVal sender As Object, _
      ByVal e As Infragistics.WebUI.UltraWebGrid.LayoutEventArgs) _
      Handles UltraWebGrid1.InitializeLayout
    	Me.UltraWebGrid1.DisplayLayout.ViewType = ViewType.Hierarchical
    
    	Me.UltraWebGrid1.DisplayLayout.SelectTypeCellDefault = SelectType.Single
    	Me.UltraWebGrid1.DisplayLayout.SelectTypeColDefault = SelectType.Single
    	Me.UltraWebGrid1.DisplayLayout.SelectTypeRowDefault = SelectType.Single
    
    	Me.UltraWebGrid1.DisplayLayout.CellClickActionDefault = _
              CellClickAction.CellSelect
    
    	Me.UltraWebGrid1.DisplayLayout.SelectedRowStyleDefault.BackColor = _
              Color.LightBlue
    
    	Me.UltraWebGrid2.DisplayLayout.AllowAddNewDefault = AllowAddNew.Yes
    	Me.UltraWebGrid2.DisplayLayout.AddNewRowDefault.Visible = AddNewRowVisible.Yes
    	Me.UltraWebGrid2.DisplayLayout.SelectTypeCellDefault = SelectType.Single
    	Me.UltraWebGrid2.DisplayLayout.AllowUpdateDefault = AllowUpdate.Yes
    	Me.UltraWebGrid2.DisplayLayout.CellClickActionDefault = _
              CellClickAction.CellSelect
    	Me.UltraWebGrid2.DisplayLayout.OptimizeCSSClassNamesOutput = _
              DefaultableBoolean.False
    
    	Me.UltraWebGrid2.DisplayLayout.SelectedRowStyleDefault.BackColor = _
              Color.LightCyan
    End Sub
    
    

    C# の場合:

    private void UltraWebGrid1_InitializeLayout(object sender, 
      Infragistics.WebUI.UltraWebGrid.LayoutEventArgs e)
    {
    	this.UltraWebGrid1.DisplayLayout.ViewType = ViewType.Hierarchical;
    	this.UltraWebGrid1.DisplayLayout.SelectTypeCellDefault = SelectType.Single;
    	this.UltraWebGrid1.DisplayLayout.SelectTypeColDefault = SelectType.Single;
    	this.UltraWebGrid1.DisplayLayout.SelectTypeRowDefault = SelectType.Single;
    	this.UltraWebGrid1.DisplayLayout.CellClickActionDefault = 
              CellClickAction.CellSelect;           
    	this.UltraWebGrid1.DisplayLayout.SelectedRowStyleDefault.BackColor = 
              Color.LightBlue;
    
    	this.UltraWebGrid2.DisplayLayout.SelectTypeCellDefault = SelectType.Single;
    	this.UltraWebGrid2.DisplayLayout.AllowUpdateDefault = AllowUpdate.Yes;
    	this.UltraWebGrid2.DisplayLayout.CellClickActionDefault = 
              CellClickAction.CellSelect;
    	this.UltraWebGrid2.DisplayLayout.OptimizeCSSClassNamesOutput = 
              DefaultableBoolean.False;
    	this.UltraWebGrid2.DisplayLayout.SelectedRowStyleDefault.BackColor = 
              Color.LightCyan;
    }
    
    
  5. UltraWebGrid1 を選択します。[プロパティ] ウィンドウで、DisplayLayout オブジェクトを展開し、次に ClientSideEvents オブジェクトを展開します。
    ClipboardError プロパティを選択し、ドロップダウン リストから [新しいハンドラを追加...] を選択します。ダイアログ ボックスが開いたら、[OK] をクリックします。これでイベントにデフォルト名が指定されます。これらの同じ手順にしたがって、UltraWebGrid2 の ClipboardError で設定を行います。これらのイベント内で、シンプルな警告メッセージが表示され、エラー番号も表示されます。以下の例コードはこれを実行する方法を示します。

    JavaScript の場合:

    function UltraWebGrid1_ClipboardError(gridName, errorNumber, message){
            alert("Customer Data Grid through error: " + errorNumber);
    }
                    
    function UltraWebGrid2_ClipboardError(gridName, errorNumber, message){
    	alert("Customer Specific Grid through error: " + errorNumber);
    }
    
  6. UltraWebGrid1 を選択します。[プロパティ] ウィンドウで、DisplayLayout オブジェクトを展開し、次に ClientSideEvents オブジェクトを展開します。CellClickHandler プロパティを選択し、ドロップダウン リストから [新しいハンドラを追加...] を選択します。ダイアログ ボックスが開いたら、[OK] をクリックします。これでイベントにデフォルト名が指定されます。これらの同じ手順にしたがって、UltraWebGrid2 の CellClickHandler で設定を行います。これらのイベント内で、マウスの右ボタンがクリックされたかどうかを確認します。ボタンが押された場合、マウスの右ボタンがどのグリッドをクリックしたかによって、正しいコンテキスト メニュー項目が有効になります。最後に、イベントを発生したセルはアクティブになって選択され、メニューが表示されます。以下の例コードはこれを実行する方法を示します。
  7. JavaScript の場合:

    function UltraWebGrid1_CellClickHandler(gridName, cellId, button){
    	// マウスの右ボタンが押されました
    	if(button == 2)
    	{
    		// メニュー項目の配列を取得します
    		var menu = igmenu_getMenuById('UltraWebMenu1');
    		var menuItems = new Array();
    		menuItems = menu.getItems();
    		// グリッドに基づいて適切なメニュー項目を有効および無効にします
    		menuItems[0].setEnabled(true);
    		menuItems[1].setEnabled(true);
    		menuItems[2].setEnabled(false);
    
    		// WebMenu を表示します
    		var cell = igtbl_getCellById(cellId);
    		cell.activate();
    		cell.select();
    		igmenu_showMenu('UltraWebMenu1',null);
    	}
    }
                    
    function UltraWebGrid2_CellClickHandler(gridName, cellId, button){
    	// マウスの右ボタンが押されました
    	if(button == 2)
    	{
    		// メニュー項目の配列を取得します
    		var menu = igmenu_getMenuById('UltraWebMenu1');
    		var menuItems = new Array();
    		menuItems = menu.getItems();
    		// グリッドに基づいて適切なメニュー項目を有効および無効にします
    		menuItems[0].setEnabled(false);
    		menuItems[1].setEnabled(false);
    		menuItems[2].setEnabled(true);
            
    		// WebMenu を表示します
    		var cell = igtbl_getCellById(cellId);
    		cell.activate();
    		cell.select();
    		igmenu_showMenu('UltraWebMenu1',null);
    	}
    }
    
  8. UltraWebGrid を選択します。[プロパティ] ウィンドウで、DisplayLayout オブジェクトを展開し、次に ClientSideEvents オブジェクトを展開します。MouseUpHandler プロパティを選択し、ドロップダウン リストで [新しいハンドラを追加...] を選択します。ダイアログ ボックスが開いたら、[OK] をクリックします。これでイベントにデフォルト名が指定されます。UltraWebGrid2 でこの同じプロパティを指定しますが、新しいハンドラを作成する代わりにドロップダウン リストから [UltraWebGrid1_MouseUpHandler] を選択します。このイベント内でブラウザのデフォルトのコンテキスト メニューをキャンセルします。以下の例コードはこれを実行する方法を示します。

    JavaScript の場合:

    function UltraWebGrid1_MouseUpHandler(gridName, id, button){
    // 右クリックでなければ関数を終了します
    if (button != 2) return;
    // グリッド参照を取得します
    var grid = igtbl_getGridById(gridName);
    //行参照を取得し、メニューを表示します
    var r = igtbl_getRowById(id);
        if (r)
       	{
       	    igmenu_showMenu("UltraWebMenu1", grid.event);
       	    ig_cancelEvent(grid.event);
       	}
    }
    
  9. WebMenu のクライアント側の ItemClick イベントを接続するために、UltraWebMenu1 を選択します。[プロパティ] ウィンドウで、MenuClientSideEvents オブジェクトが表示されるまで下にスクロールして展開します。ItemClick イベントを選択し、次にドロップダウン リストから [新しいハンドラを追加...] を選択します。ダイアログ ボックスで [OK] をクリックします。
  10. ItemClick イベント内で、切り取り/コピー/貼り付け機能をコンテキスト メニューに追加します。SelectedItem プロパティを使用して、コンテキスト メニューでどの項目が選択されたのかを判断します。コピーまたは切り取りメニューが選択されると、UltraWebGrid1 で Copy または Cut メソッドが呼び出されます。貼り付け項目が選択されると、UltraWebGrid で Paste メソッドが呼びされます。その他任意の項目が選択されると、Paste 関数は失敗します。

    JavaScript の場合:

    function UltraWebMenu1_ItemClick(menuId, itemId){
    	// 選択された MenuItem と最初のグリッドへの参照を取得します。
    	var selectedItem = igmenu_getItemById(itemId);
    	var grid1 = igtbl_getGridById('UltraWebGrid1');
    	// 選択されたメニュー項目のテキストを取得します。
    	if(selectedItem.getText() == 'Copy')
    			grid1.copy();
    	else if(selectedItem.getText() == 'Cut')
    		grid1.cut();
    	else if(selectedItem.getText() == 'Paste')
    	{
    		// ページ上の 2 番目のグリッドへの参照を取得します。
    		var grid2 = igtbl_getGridById('UltraWebGrid2');
    		// paste が false を返すかどうかを確認します。
    		// false を返す場合、貼り付けは失敗しました。
    		if(grid2.paste() == false)
    			alert('Paste Failed');
    	}
    	else
    		alert('An invalid selection has occurred.');
    }
    
    

  11. サンプルをビルドして実行し、UltraWebGrid1 にテスト データを入力します。UltraWebGrid1 を右クリックすると、コンテキスト メニューが表示されてコピーおよび切り取り項目のみが有効であることを示します。
  12. UltraWebGrid2 を右クリックすると、貼り付けのみがコンテキスト メニューで有効であることを示します。これで UltraWebGrid1 から UltraWebGrid2 のセルに情報をコピー アンド ペーストすることができるようになりました。

    このトピックについてのご意見・ご感想をEメール にてお寄せください。

    Copyright © 1996-2009 Infragistics, Inc. All rights reserved.

    ビルドバージョン: 9.1