ui.igGridColumnMoving

ui.igGridColumnMoving_image

igGrid コントロールおよび igHierarchicalGrid コントロールはどちらも、グリッド内の列移動機能を備えています。列移動機能を使用すると、グリッドの列の順序を変更できます。列移動機能は 2 つのモードがあります:

immediate モードは、ドラッグの間に列ヘッダーを移動し、列の切り替えにアニメーションを追加します。列のコンテンツの移動は、列ヘッダーをドロップした後に実行されます。

遅延モードは、列のドロップする位置を示す矢印を使用します。

この API のクラス、オプション、イベント、メソッド、およびテーマの詳細は、上記の関連するタブの下に表示されます

以下のコード スニペットは、igGrid コントロールの列移動機能を初期化する方法を示します。

この API を使用して開始する方法の詳細を表示するには、ここをクリックしてください。.igGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、 「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コード サンプル

 
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
	  <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        var products = [
            { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
            { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
            { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
            { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
            { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
            { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
            { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
            { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
            { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
        ];
 
        $(function () {
            $("#gridColumnMoving").igGrid({
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number" },
                    { headerText: "Product Name", key: "Name", dataType: "string" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
                ],
                features:[
                    {
                        name: "ColumnMoving"
                    }
                ],
                width: "500px",
                dataSource: products
            });
        });
    </script>
</head>
<body>
    <table id="gridColumnMoving"></table>
</body>
</html>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
infragistics.ui.grid.framework.js
infragistics.ui.tree.js
infragistics.ui.shared.js
infragistics.datasource.js
infragistics.util.js
infragistics.ui.grid.shared.js
infragistics.ui.grid.featurechooser.js

継承

  • addMovingDropdown

    タイプ:
    bool
    デフォルト:
    true

    ヘッダー セルは、 移動ヘルパー ドロップダウンを開く追加ボタンを含むかどうか指定します。

    コード サンプル

     
       //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    addMovingDropdown: false
                }
            ]
        });
        
        //Get
        var addMovingDropdown = $(".selector").igGridColumnMoving("option", "addMovingDropdown");

  • columnMovingDialogContainment

    タイプ:
    string
    デフォルト:
    "owner"

    列移動ダイアログのコンテインメント動作を管理します。
    owner - ダイアログはグリッド領域でのみドラッグ可能です。
    window - ダイアログはウィンドウ領域全体でドラッグ可能です。

    コード サンプル

     
      //Initialize
       $(".selector").igGrid({
        features: [
          {
              name : "ColumnMoving",
              columnMovingDialogContainment : "window"
           }
        ]
      });
 
    //Get
    var columnMovingDialogContainment = $(".selector").igGridColumnMoving("option", "columnMovingDialogContainment");

  • columnSettings

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    列の移動オプションを指定する列設定のリスト。

    コード サンプル

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    columnSettings: [
                        { columnKey: "ProductID", allowMoving: true }
                    ]
                }
            ]
        });
        
		    //Get
        var columnSettings = $(".selector").igGridColumnMoving("option", "columnSettings");

    • allowMoving

      タイプ:
      bool
      デフォルト:
      true

      列の移動を許可します。

      コード サンプル

       
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    columnSettings: [
                        { columnIndex: 0, allowMoving: true }
                    ]
                }
            ]
        });
        
		    //Get
        var columnSettings = $(".selector").igGridColumnMoving("option", "columnSettings");
        var allowMoving = columnSettings[0].allowMoving;

    • columnIndex

      タイプ:
      number
      デフォルト:
      null

      列インデックス。列キーの代わりに使用できます。列設定の生成には列を常に識別子として使用することを推奨します。

      コード サンプル

       
          //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    columnSettings: [
                        { columnIndex: 0, allowMoving: true }
                    ]
                }
            ]
        });
        
		    //Get
        var columnSettings = $(".selector").igGridColumnMoving("option", "columnSettings");
        var columnIndex = columnSettings[0].columnIndex;

    • columnKey

      タイプ:
      string
      デフォルト:
      null

      列キー。これは、columnIndex が設定されていない場合に各列設定で必要なプロパティです。

      コード サンプル

       
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    columnSettings: [
                         { columnKey: "ProductID", allowMoving: true }
                    ]
                }
            ]
        });
        
		    //Get
        var columnSettings = $(".selector").igGridColumnMoving("option", "columnSettings");
        var columnKey = columnSettings[0].columnKey;

  • dialogWidget

    タイプ:
    string
    デフォルト:
    "igGridModalDialog"

    使用するダイアログ ウィジェットの名前。 $.ui.igGridModalDialog から継承します。

    コード サンプル

     
        //create dialog widget that inherits from $.ui.igGridModalDialog
          $.widget("ui.CustomDialog", $.ui.igGridModalDialog, {});
           //Initialize
        $(".selector").igGrid({
            features : [
                {
                   name : "ColumnMoving",
                   dialogWidget: "CustomDialog"
                }
            ]
        });
        
		    //Get
        var dialogWidget = $(".selector").igGridColumnMoving("option", "dialogWidget");

  • dragHelperOpacity

    タイプ:
    number
    デフォルト:
    1.0

    列ヘッダーがドラッグされている間の、ドラッグ マークアップの不透明性を指定します。
    値は 0 と 1 の間である必要があります。GroupBy が有効な場合、GroupBy 構成の対応オプションは、
    これを優先して使用されます。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    dragHelperOpacity: 0.5
                }
            ]
        });
        
		    //Get
        var dragHelperOpacity = $(".selector").igGridColumnMoving("option", "dragHelperOpacity");

  • dropDownMoveFirstText

    タイプ:
    string
    デフォルト:
    ""

    「最初へ移動」ドロップダウン ボタンのキャプションのテキストを指定します。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    dropDownMoveFirstText: "New Move First"
                }
            ]
        });
        
		    //Get
        var dropDownMoveFirstText = $(".selector").igGridColumnMoving("option", "dropDownMoveFirstText");

  • dropDownMoveLastText

    タイプ:
    string
    デフォルト:
    ""

    「最後へ移動」ドロップダウン ボタンのキャプションのテキストを指定します。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    dropDownMoveLastText: "New Move Last"
                }
            ]
        });
        
		    //Get
        var dropDownMoveLastText = $(".selector").igGridColumnMoving("option", "dropDownMoveLastText");

  • dropDownMoveLeftText

    タイプ:
    string
    デフォルト:
    ""

    「左へ移動」ドロップダウン ボタンのキャプションのテキストを指定します。

    コード サンプル

     
            //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    dropDownMoveLeftText: "New Move Left"
                }
            ]
        });
        
		    //Get
        var dropDownMoveLeftText = $(".selector").igGridColumnMoving("option", "dropDownMoveLeftText");

  • dropDownMoveRightText

    タイプ:
    string
    デフォルト:
    ""

    「右へ移動」ドロップダウン ボタンのキャプションのテキストを指定します。

    コード サンプル

     
         //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    dropDownMoveRightText: "New Move Right"
                }
            ]
        });
        
		    //Get
        var dropDownMoveRightText = $(".selector").igGridColumnMoving("option", "dropDownMoveRightText");

  • featureChooserSubmenuText

    タイプ:
    string
    デフォルト:
    ""

    機能セレクターのサブメニュー ボタンのキャプションのテキストを指定します。

    コード サンプル

     
         //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    featureChooserSubmenuText: "Move to"
                }
            ]
        });
        
		    //Get
        var featureChooserSubmenuText = $(".selector").igGridColumnMoving("option", "featureChooserSubmenuText");

  • hideHeaderContentsDuringDrag

    タイプ:
    bool
    デフォルト:
    true

    ドラッグされている列のコンテンツが非表示になるかどうかを指定します。このオプションは、
    移動モードがイミディエイトの場合のみ関係します。

    コード サンプル

     
            //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    hideHeaderContentsDuringDrag: false
                }
            ]
        });
        
		    //Get
        var hideHeaderContentsDuringDrag = $(".selector").igGridColumnMoving("option", "hideHeaderContentsDuringDrag");

  • inherit

    タイプ:
    bool
    デフォルト:
    false

    子レイアウトで機能継承を有効または無効にします。注: igHierarchicalGrid のみに適用します。

  • mode

    タイプ:
    enumeration
    デフォルト:
    immediate

    機能のドラッグ アンド ドロップ モードを指定します。

    メンバー

    • immediate
    • タイプ:string
    • ヘッダーをドラッグしている間、列ヘッダーが並べ替え、カーソルの下でヘッダーをドロップするための空間が空けます。
    • deferred
    • タイプ:string
    • ドラッグされているヘッダーのクローンが作成され、ドロップの手助けとなるインジケーターが列の間に表示されます。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    mode: "deferred"
                }
            ]
        });
        
		    //Get
        var mode = $(".selector").igGridColumnMoving("option", "mode");

  • moveType

    タイプ:
    enumeration
    デフォルト:
    dom

    列の並べ替え方法を設定します。

    メンバー

    • dom
    • タイプ:string
    • 列を DOM 操作により並べ替えます。
    • render
    • タイプ:string
    • 列を並べ替えず、新しい列の並べでグリッドを描画しなおします。注: このオプションは immediate 移動モードとの互換性はありません。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    moveType: "render"
                }
            ]
        });
        
		    //Get
        var moveType = $(".selector").igGridColumnMoving("option", "moveType");
        
        //Set        
        $(".selector").igGridColumnMoving("option", "moveType", "render");

  • movingAcceptanceTolerance

    タイプ:
    number
    デフォルト:
    20

    移動操作が許可されているドラッグされた列と下の列の端の間の長さ (ピクセル) を指定します。

    コード サンプル

     
       //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingAcceptanceTolerance: 10
                }
            ]
        });
        
		    //Get
        var movingAcceptanceTolerance = $(".selector").igGridColumnMoving("option", "movingAcceptanceTolerance");

  • movingDialogAnimationDuration

    タイプ:
    number
    デフォルト:
    200

    モーダル ダイアログを表示または非表示にするアニメーション時間をミリ秒で指定します。

    コード サンプル

     
            //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingDialogAnimationDuration: 100
                }
            ]
        });
        
		    //Get
        var movingDialogAnimationDuration = $(".selector").igGridColumnMoving("option", "movingDialogAnimationDuration");

  • movingDialogCaptionButtonAsc

    タイプ:
    string
    デフォルト:
    ""

    列移動ダイアログの各 [上へ移動] ボタンのキャプションを指定します。

    コード サンプル

                 
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingDialogCaptionButtonAsc: "Ascending"
                }
            ]
        });
        
		    //Get
        var movingDialogCaptionButtonAsc = $(".selector").igGridColumnMoving("option", "movingDialogCaptionButtonAsc");

  • movingDialogCaptionButtonDesc

    タイプ:
    string
    デフォルト:
    ""

    列移動ダイアログの各 [下へ移動] ボタンのキャプションを指定します。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingDialogCaptionButtonDesc: "Descending"
                }
            ]
        });
        
		    //Get
        var movingDialogCaptionButtonDesc = $(".selector").igGridColumnMoving("option", "movingDialogCaptionButtonDesc");

  • movingDialogCaptionText

    タイプ:
    string
    デフォルト:
    ""

    [列移動] ダイアログのキャプションのテキストを指定します。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingDialogCaptionText: "My Moving Dialog"
                }
            ]
        });
        
		    //Get
        var movingDialogCaptionText = $(".selector").igGridColumnMoving("option", "movingDialogCaptionText");

  • movingDialogDisplayText

    タイプ:
    string
    デフォルト:
    ""

    [機能セレクター] エントリのキャプションのテキストを指定します。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingDialogDisplayText: "My Dialog"
                }
            ]
        });
        
		    //Get
        var movingDialogDisplayText = $(".selector").igGridColumnMoving("option", "movingDialogDisplayText");

  • movingDialogDropTooltipMarkup

    タイプ:
    string
    デフォルト:
    "<div><p><span></span><strong>{text}</strong></p></div>"

    列移動ダイアログでドロップ ツールチップのマークアップを指定します。

    コード サンプル

     
       //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingDialogDropTooltipMarkup: "<div style='color:red'><p><span></span><strong>{text}</strong></p></div>"
                }
            ]
        });
        //Get
        var movingDialogDropTooltipMarkup = $(".selector").igGridColumnMoving("option", "movingDialogDropTooltipMarkup");

  • movingDialogDropTooltipText

    タイプ:
    string
    デフォルト:
    ""

    列移動ダイアログでドロップ ツールチップのテキストを指定します。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingDialogDropTooltipText: "Set your tooltip text"
                }
            ]
        });
        
		    //Get
        var movingDialogDropTooltipText = $(".selector").igGridColumnMoving("option", "movingDialogDropTooltipText");

  • movingDialogHeight

    タイプ:
    number
    デフォルト:
    ""

    列移動のダイアログの高さを指定します。

    コード サンプル

     
      //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingDialogHeight: "400px"
                }
            ]
        });
        
		    //Get
        var movingDialogHeight = $(".selector").igGridColumnMoving("option", "movingDialogHeight");

  • movingDialogWidth

    タイプ:
    number
    デフォルト:
    400

    列移動ダイアログの幅を指定します。

    コード サンプル

     
            //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingDialogWidth: "300px"
                }
            ]
        });
        
		    //Get
        var movingDialogWidth = $(".selector").igGridColumnMoving("option", "movingDialogWidth");

  • movingScrollTolerance

    タイプ:
    number
    デフォルト:
    20

    水平スクロールが発生するドラッグされた列と下の列の端の間の長さ (ピクセル) を指定します。

    コード サンプル

     
             //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingScrollTolerance: 10
                }
            ]
        });
        
		    //Get
        var movingScrollTolerance = $(".selector").igGridColumnMoving("option", "movingScrollTolerance");

  • movingToolTipMove

    タイプ:
    string
    デフォルト:
    ""

    移動インジケーターのツールチップ テキストを指定します。

    コード サンプル

     
       //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    movingToolTipMove: "My tooltip"
                }
            ]
        });
        
		    //Get
        var movingToolTipMove = $(".selector").igGridColumnMoving("option", "movingToolTipMove");

  • scrollDelta

    タイプ:
    number
    デフォルト:
    2

    個々のスクロール操作の長さ (ピクセル) を指定します。

    コード サンプル

     
                   //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    scrollDelta: 4
                }
            ]
        });
        
		    //Get
        var scrollDelta = $(".selector").igGridColumnMoving("option", "scrollDelta");

  • scrollSpeedMultiplier

    タイプ:
    number
    デフォルト:
    2.0

    後続のスクロール操作の間の遅延の乗数を指定します。この数値が大きくなると、スクロールが表示されるまでの時間が長くなります。

    コード サンプル

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "ColumnMoving",
                    scrollSpeedMultiplier: 4.0
                }
            ]
        });
        
		    //Get
        var scrollSpeedMultiplier = $(".selector").igGridColumnMoving("option", "scrollSpeedMultiplier");

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

  • columnDragCanceled

    キャンセル可能:
    false

    ドラッグ操作がキャンセルされるときに、発生されるイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • columnKey
          タイプ:String

          ドラッグされた列の列キーを取得します。

        • columnIndex
          タイプ:Number

          ドラッグされた列の列インデックスを取得します。

        • owner
          タイプ:jQuery

          ウィジェットへの参照を取得します。

        • header
          タイプ:jQuery

          ドラッグされた元の th への参照を取得します。

        • helper
          タイプ:jQuery

          実際にドラッグされたクローンされた DOM 要素への参照を取得します。

    コード サンプル

     
                //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingcolumndragcanceled", function (evt, args) {
             //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              args.owner;
     
              // reference to the grid widget.
              args.owner.grid;
     
              // the key of the column, which was being dragged
              args.columnKey; 
     
              // the index of the column, which was being dragged
              args.columnIndex;
              
              // the orginal th that was being dragged
              args.header;
              
              // the cloned DOM element that was actually being dragged
              args.helper;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      columnDragCanceled: function(evt, args){ ... }
                  }
              ]
          });

  • columnDragEnd

    キャンセル可能:
    false

    ドラッグ操作が列ヘッダーの上に終了するときに発生されるイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • columnKey
          タイプ:String

          ドラッグされた列の列キーを取得します。

        • columnIndex
          タイプ:Number

          ドラッグされた列の列インデックスを取得します。

        • owner
          タイプ:jQuery

          ウィジェットへの参照を取得します。

        • header
          タイプ:jQuery

          ドラッグされた元の th への参照を取得します。

        • helper
          タイプ:jQuery

          実際にドラッグされたクローンされた DOM 要素への参照を取得します。

    コード サンプル

     
      //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingcolumndragend", function (evt, args) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              args.owner;
     
              // reference to the grid widget.
              args.owner.grid;
     
              // the key of the column, which was being dragged
              args.columnKey; 
     
              // the index of the column, which was being dragged
              args.columnIndex;
              
              // the orginal th that was being dragged
              args.header;
              
              // the cloned DOM element that was actually being dragged
              args.helper;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      columnDragEnd: function(evt, args){ ... }
                  }
              ]
          });

  • columnDragStart

    キャンセル可能:
    true

    ドラッグ操作が列ヘッダーの上に開始するときに発生されるイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • columnKey
          タイプ:String

          ドラッグされている列の列キーを取得します。

        • columnIndex
          タイプ:Number

          ドラッグされている列の列インデックスを取得します。

        • owner
          タイプ:jQuery

          ウィジェットへの参照を取得します。

        • header
          タイプ:jQuery

          ドラッグされている元の th への参照を取得します。

        • header
          タイプ:jQuery

          実際にドラッグされているクローンされた DOM 要素への参照を取得します。

    コード サンプル

     
      //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingcolumndragstart", function (evt, args) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              args.owner;
     
              // reference to the grid widget.
              args.owner.grid;
     
              // the key of the column, which was being dragged
              args.columnKey; 
     
              // the index of the column, which was being dragged
              args.columnIndex;
              
              // the orginal th that was being dragged
              args.header;
              
              // the cloned DOM element that was actually being dragged
              args.helper;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      columnDragStart: function(evt, args){ ... }
                  }
              ]
          });

  • columnMoved

    キャンセル可能:
    false

    列移動操作が完了されるときに発生されるイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • columnKey
          タイプ:String

          移動された列の列キーを取得します。

        • oldIndex
          タイプ:Number

          移動された列の以前の列インデックスを取得します。

        • newIndex
          タイプ:Number

          移動された列の新しい列インデックスを取得します。

        • owner
          タイプ:Object

          ウィジェットへの参照を取得します。

    コード サンプル

     
       //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingcolumnmoved", function (evt, args) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              args.owner;
     
              // reference to the grid widget.
              args.owner.grid;
     
              // the key of the column, which was being moved
              args.columnKey; 
     
              // the previous index of the column, which was being moved
              args.oldIndex;
              
              // the new index of the column, which was being moved
              args.newIndex;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      columnMoved: function(evt, args){ ... }
                  }
              ]
          });

  • columnMoving

    キャンセル可能:
    true

    列移動操作が開始されるときに発生されるイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • columnKey
          タイプ:String

          移動された列の列キーを取得します。

        • columnIndex
          タイプ:Number

          移動された列の列インデックスを取得します。

        • targetIndex
          タイプ:Number

          移動された列の新しい列インデックスを取得します。

        • owner
          タイプ:jQuery

          ウィジェットへの参照を取得します。

    コード サンプル

     
      //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingcolumnmoving", function (evt, args) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              args.owner;
     
              // reference to the grid widget.
              args.owner.grid;
     
              // the key of the column, which was being moved
              args.columnKey; 
     
              // the index of the column, which was being moved
              args.columnIndex;
              
              // the new column index of the column that was being moved
              args.targetIndex;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      columnMoving: function(evt, args){ ... }
                  }
              ]
          });

  • movingDialogClosed

    キャンセル可能:
    false

    移動ダイアログが閉じた後に発生するイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialogElement
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

    コード サンプル

     
      //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingmovingdialogclosed", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // he moving dialog element. This is a jQuery object.
              ui.movingDialogElement;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogClosed: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogClosing

    キャンセル可能:
    true

    移動ダイアログが閉じる前に発生するイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialogElement
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

    コード サンプル

     
       //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingmovingdialogclosed", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialogElement;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogClosed: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogContentsRendered

    キャンセル可能:
    false

    モーダル ダイアログのコンテンツが描画された後に発生するイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialog
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

    コード サンプル

     
       //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingmovingdialogcontentsrendered", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialog;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogContentsRendered: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogContentsRendering

    キャンセル可能:
    true

    モーダル ダイアログのコンテンツが描画される前に発生するイベント

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialog
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

    コード サンプル

     
       //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingmovingdialogcontentsrendering", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialog;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogContentsRendering: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogDragColumnMoved

    キャンセル可能:
    false

    移動ダイアログのドラッグによって列移動が完了したときに発生されるイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialog
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

        • columnKey
          タイプ:String

          移動された列の列キーを取得します。

        • columnIndex
          タイプ:Number

          移動された列の列インデックスを取得します。

        • targetIndex
          タイプ:Number

          移動された列の新しい列インデックスを取得します。

    コード サンプル

     
      //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingmovingdialogdragcolumnmoved", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialog;
              
              // the key of the column, which was being moved
              ui.columnKey; 
     
              // the index of the column, which was being moved
              ui.columnIndex;
              
              // the new column index of the column that was being moved
              ui.targetIndex;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogDragColumnMoved: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogDragColumnMoving

    キャンセル可能:
    true

    移動ダイアログのドラッグによって列移動が開始したときに発生されるイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialog
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

        • columnKey
          タイプ:String

          移動された列の列キーを取得します。

        • columnIndex
          タイプ:Number

          移動された列の列インデックスを取得します。

        • targetIndex
          タイプ:Number

          移動された列の新しい列インデックスを取得します。

    コード サンプル

     
      //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingmovingdialogdragcolumnmoving", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialog;
              
              // the key of the column, which was being moved
              ui.columnKey; 
     
              // the index of the column, which was being moved
              ui.columnIndex;
              
              // the new column index of the column that was being moved
              ui.targetIndex;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogDragColumnMoving: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogDragged

    キャンセル可能:
    false

    移動ダイアログの位置が変わるたびに発生するイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialogElement
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

        • originalPosition
          タイプ:Object

          移動ダイアログ div の元の位置をページに相対して { top, left } オブジェクトとして取得します。

        • position
          タイプ:Object

          移動ダイアログ div の現在の位置をページに相対して { top, left } オブジェクトとして取得します。

    コード サンプル

     
      //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingmovingmovingdialogdragged", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialogElement;
              
              // the original position of the moving dialog div as { top, left } object, relative to the page
              ui.originalPosition; 
     
              // the current position of the moving dialog div as { top, left } object, relative to the page
              ui.position;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogDragged: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogMoveDownButtonPressed

    キャンセル可能:
    false

    移動ダイアログで [下へ移動] ボタンが押したときに発生されるイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialog
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

        • columnKey
          タイプ:String

          移動された列の列キーを取得します。

        • columnIndex
          タイプ:Number

          移動された列の列インデックスを取得します。

        • targetIndex
          タイプ:Number

          移動された列の新しい列インデックスを取得します。

    コード サンプル

     
      //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingmovingdialogmovedownbuttonpressed", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialog;
              
              // the key of the column, which was being moved
              ui.columnKey; 
     
              // the index of the column, which was being moved
              ui.columnIndex;
              
              // the new column index of the column that was being moved
              ui.targetIndex;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogMoveDownButtonPressed: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogMoveUpButtonPressed

    キャンセル可能:
    false

    移動ダイアログで [上へ移動] ボタンが押したときに発生されるイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialog
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

        • columnKey
          タイプ:String

          移動された列の列キーを取得します。

        • columnIndex
          タイプ:Number

          移動された列の列インデックスを取得します。

        • targetIndex
          タイプ:Number

          移動された列の新しい列インデックスを取得します。

    コード サンプル

     
            //Bind after initialization    
          $(document).delegate(".selector", "iggridcolumnmovingmovingdialogmoveupbuttonpressed", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialog;
              
              // the key of the column, which was being moved
              ui.columnKey; 
     
              // the index of the column, which was being moved
              ui.columnIndex;
              
              // the new column index of the column that was being moved
              ui.targetIndex;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogMoveUpButtonPressed: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogOpened

    キャンセル可能:
    false

    列選択が既に開いた後に発生するイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialogElement
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

    コード サンプル

     
                  //Bind after initialization    
              $(document).delegate(".selector", "iggridcolumnmovingmovingdialogopened", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialogElement;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogOpened: function(evt, ui){ ... }
                  }
              ]
          });

  • movingDialogOpening

    キャンセル可能:
    true

    移動ダイアログが開く前に発生するイベント。

    • evt
      タイプ:Event

      JQuery イベント オブジェクト。

    • args
      タイプ:Object

        • owner
          タイプ:Object

          igGridColumnMoving ウィジェットへの参照を取得します。

    • ui
      タイプ:Object

        • owner.grid
          タイプ:Object

          igGrid ウィジェットへの参照を取得します。

        • movingDialogElement
          タイプ:jQuery

          移動ダイアログ要素への参照を取得します。これは jQuery オブジェクトです。

    コード サンプル

     
                        //Bind after initialization    
              $(document).delegate(".selector", "iggridcolumnmovingmovingdialogopening", function (evt, ui) {
              //return the triggered event
              evt;
     
              // reference to the igGridColumnMoving widget.
              ui.owner;
     
              // reference to the grid widget.
              ui.owner.grid;
     
              // the moving dialog element. This is a jQuery object.
              ui.movingDialogElement;
          });
 
          //Initialize
          $(".selector").igGrid({
              features : [
                  {
                      name : "ColumnMoving",
                      movingDialogOpening: function(evt, ui){ ... }
                  }
              ]
          });

  • destroy

    .igGridColumnMoving( "destroy" );

    コード サンプル

     $(".selector").igGridColumnMoving("destroy");

  • moveColumn

    .igGridColumnMoving( "moveColumn", column:object, target:object, [after:bool], [inDom:bool], [callback:function] );

    指定した位置にある表示列を、対象列の前または後に移動するか、対象のインデックスに移動します。
    注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。ランタイム エラーを発生する場合があります。エラーを回避するには、メソッドによって提供されるコールバック パラメーターに以後のコードを挿入します。

    • column
    • タイプ:object
    • 移動される列の ID。キー、複数列ヘッダーの ID、または数値書式のインデックスです。グリッドが複数列ヘッダーを含む場合、数値書式のインデックスはサポートされません。
    • target
    • タイプ:object
    • 列に移動する列の識別子、または列に移動するインデックス。列の識別子の場合、デフォルトでその列の後に移動されます。
    • after
    • タイプ:bool
    • オプション
    • 列が対象の列の前または後に移動するかどうかを指定します。
    • inDom
    • タイプ:bool
    • オプション
    • 列は DOM 操作またはグリッドの描画によって移動されるかどうかを指定します。
    • callback
    • タイプ:function
    • オプション
    • 列を移動したときに呼び出すカスタム関数を指定します。

    コード サンプル

     
        // calling method with column indexes
      $(".selector").igGridColumnMoving("moveColumn", 0, 1, true, false);
      
        // calling method with column keys
      $(".selector").igGridColumnMoving("moveColumn", "ProductId", "ProductName", true, true);
      
        // calling method with column keys and function callback
      $(".selector").igGridColumnMoving("moveColumn", "ProductId", "ProductName", true, true, function () {
        // Custom code executed after the move operation finishes
      });

  • ui-iggrid-columnmoving-dropdown-dialog ui-widget ui-widget-content ui-corner-all

    列移動のドロップダウン ダイアログに適用されるクラス。

  • ui-iggrid-columnmoving-dropdown-ddlistitemicons ui-state-default

    列移動のドロップダウン リストの各項目に適用されるクラス。

  • ui-iggrid-columnmoving-dropdown-listitem-hover ui-state-active ui-state-hover

    マウスが上にホバーされるときに列移動のドロップダウン リストの各項目に適用されるクラス。

  • ui-iggrid-columnmoving-dropdown-ddlistitemtext

    マウスが上にホバーされるときに列移動のドロップダウン リストの各項目のテキストに適用されるクラス。

  • ui-iggrid-columnmoving-dropdown-list ui-menu

    列移動のドロップダウン リストに適用されるクラス。

  • ui-iggrid-hiding-indicator-selected

    移動ドロップダウンの列インジケーターに適用されるクラス。

  • ui-iggrid-columnmoving-dragbottom ui-icon ui-icon-triangle-1-n

    遅延モードで下の列移動インジケーターに適用されるクラス。

  • ui-iggrid-columnmoving-dragleft

    遅延モードで左に傾斜した列移動インジケーターに適用されるクラス。

  • ui-iggrid-columnmoving-dragright

    遅延モードで右に傾斜した列移動インジケーターに適用されるクラス。

  • ui-iggrid-columnmoving-dragtop ui-icon ui-icon-triangle-1-s

    遅延モードで上の列移動インジケーターに適用されるクラス。

  • ui-iggrid-moving-indicator

    移動ドロップダウンを展開するテーブル ヘッダー ボタンに適用されるクラス。

  • ui-iggrid-columnmovingiconcontainer

    機能選択アイコンのコンテナーに適用されるクラス。

  • ui-iggrid-indicatorcontainer

    ドロップダウン ヘッダー ボタンのコンテナーに適用されるクラス。

  • ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-first

    列移動ダイアログの [最初へ移動] アイコンに適用されるクラス。

  • ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-last

    列移動ダイアログの [最後へ移動] アイコンに適用されるクラス。

  • ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-left

    列移動ダイアログの [左へ移動] アイコンに適用されるクラス。

  • ui-icon ui-iggrid-icon-move

    列移動機能の機能選択アイコンに適用されるクラス。

  • ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-right

    列移動ダイアログの [右へ移動] アイコンに適用されるクラス。

  • ui-iggrid-featurechooser-list-submenu ui-menu ui-widget ui-widget-content ui-corner-all

    移動項目を含む機能セレクターのサブメニューに適用されるクラス。

  • ui-iggrid-featurechooser-list-submenu-item ui-state-default

    機能セレクターのサブメニューの移動項目に適用されるクラス。

  • ui-state-hover

    マウスによってホバーされる場合、機能セレクターのサブメニューの移動項目に適用されるクラス。

  • ui-state-hover

    マウスが上にホバーするときにテーブル ヘッダー セルに適用されるクラス。

  • ui-icon ui-icon-close

    移動ダイアログの [閉じる] ボタンに適用されるクラス。

  • ui-iggrid-moving-dialog-columns

    移動ダイアログの項目のリストに適用されるクラス。

  • ui-widget-content

    移動ダイアログの項目のリストの項目に適用されるクラス。

  • ui-button ui-corner-all ui-button-icon-only ig-sorting-indicator

    移動ダイアログの矢印インジケーターの内部のボタン要素に適用されるクラス。

  • ui-icon-arrowthick-1-s ui-button-icon-primary ui-icon

    移動ダイアログの各リスト項目の下へ移動矢印に適用されるクラス。

  • ui-icon-arrowthick-1-n ui-button-icon-primary ui-icon

    移動ダイアログの各リスト項目の上へ移動矢印に適用されるクラス。

  • ui-iggrid-dialog-text

    移動ダイアログの各リスト項目のテキストに適用されるクラス。

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