ui.igGridResizing

ui.igGridResizing_image

igGrid コントロールおよび igHierarchicalGrid コントロールはどちらも、列のサイズ変更機能を備えています。ユーザーは、 列の幅を任意に調整するかまたは列の右境界線をダブルクリックして 列内の最も長い文字列の幅に展開するかを選択できます。この 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>
    <script src="js/infragistics.core.js" type="text/javascript"></script>
	  <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        var ds = [
    	    { "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" }
        ];
    
        $("#gridResizing").igGrid({
	    autoGenerateColumns: false,
	    columns: [
	        { headerText: "Product ID", key: "ProductID", dataType: "number", width: "200px" },
	        { headerText: "Product Name", key: "Name", dataType: "string", width: "200px" },
	        { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "200px" }
	    ],
	    dataSource: ds,
	    features: [
	    {
		    name: "Resizing",
		    deferredResizing: false,
		    allowDoubleClickToResize: true,
		    columnSettings: [
			    { columnKey: "ProductID", allowResizing: false },
			    { columnKey: "Name", minimumWidth: 40 }
		    ]
	    }]
        });
    });
    </script>
</head>
<body>
	<table id="gridResizing"></table>
</body>
</html>   
 

関連サンプル

関連トピック

依存関係

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

継承

  • allowDoubleClickToResize

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

    列のサイズを、現在可視の最長セル値のサイズに変更します。

    コード サンプル

     
    		//Initialize
            $(".selector").igGrid({
                features : [
                    {
                        name : "Resizing",
                        allowDoubleClickToResize: true
                    }
                ]
            });
    	  
  • columnSettings

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

    サイズ変更オプションを列ごとに指定する列設定のリスト。

    コード サンプル

            //Initialize
            $(".selector").igGrid({
                features: [
                    {
                        name: "Resizing",
                        columnSettings: [
                            { columnKey: "ProductID", allowResizing: true },
                        ]
                    }
                ]
            });
    	  
    • allowResizing

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

      列のサイズ変更を有効/有効にします。

      コード サンプル

       
      			//Initialize
      			$(".selector").igGrid({
      				features: [
      					{
      						name: "Resizing",
      						columnSettings: [
      							{ columnIndex: 0, allowResizing: true },
      						]
      					}
      				]
      			});
      		  
    • columnIndex

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

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

      コード サンプル

      		   //Initialize
      			$(".selector").igGrid({
      				features: [
      					{
      						name: "Resizing",
      						columnSettings: [
      							{ columnIndex: 0, allowResizing: true },
      						]
      					}
      				]
      			});	
      		
    • columnKey

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

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

      コード サンプル

       
      		   //Initialize
      			$(".selector").igGrid({
      				features: [
      					{
      						name: "Resizing",
      						columnSettings: [
      							{ columnKey: "ProductID", allowResizing: true },
      						]
      					}
      				]
      			});	
      		  
    • maximumWidth

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

      最大列幅 (ピクセル単位またはパーセント)。

      コード サンプル

      		   //Initialize
      			$(".selector").igGrid({
      				features: [
      					{
      						name: "Resizing",
      						columnSettings: [
      							{ columnIndex: 0, maximumWidth: 100 },
      						]
      					}
      				]
      			});
      		  
    • minimumWidth

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

      最小列幅 (ピクセル単位またはパーセント)。

      コード サンプル

      		   //Initialize
      			$(".selector").igGrid({
      				features: [
      					{
      						name: "Resizing",
      						columnSettings: [
      							{ columnIndex: 0, minimumWidth: 30 },
      						]
      					}
      				]
      			});
      		  
  • deferredResizing

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

    ユーザーがサイズ変更を終了するか、または直ちに適用するまでサイズ変更を保留するかどうかを指定します。

    コード サンプル

    		//Initialize
            $(".selector").igGrid({
                features : [
                    {
                        name : "Resizing",
                        deferredResizing: true
                    }
                ]
            });
    	  
  • handleThreshold

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

    サイズ変更可能な列ヘッダーそれぞれの右側に配置される、サイズ変更ハンドルの幅 (ピクセル単位)。

    コード サンプル

    		//Initialize
            $(".selector").igGrid({
                features : [
                    {
                        name : "Resizing",
                        handleThreshold: 10
                    }
                ]
            });
    	  
  • inherit

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

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

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

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

詳細の表示
  • columnResized

    キャンセル可能:
    false

    サイズ変更が実行され結果が描画された後に発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、igGridResizing ウィジェットへの参照を取得します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    ui.columnIndex を使用してサイズ変更されている列インデックスを取得します。
    ui.columnKey を使用してサイズ変更されている列キーを取得します。
    ui.originalWidth を使用して元の列幅を取得します。
    ui.newWidth を使用して、サイズ変更後の最終的な列幅を取得します。

    コード サンプル

         
            //Bind after initialization		
    		$(document).delegate(".selector", "iggridresizingcolumnresized", function (evt, ui) { 
                //return the triggered event
                evt;
                
                // the index of the column that is resized
                ui.columnIndex;
                
                // the key of the column that is resized
                ui.columnKey;
                
                // the width of the column before resizing is done
                ui.originalWidth;
                
                // the width of the column after resizing is done
                ui.newWidth;
                
                // reference to the igGridResizing widget
                ui.owner;
            
            });
            
            //Initialize
            $(".selector").igGrid({
                features : [
                    {
                        name : "Resizing",
    					columnResized: function(evt, ui){ ... }
                    }
                ]
            });
    	  
  • columnResizing

    キャンセル可能:
    true

    サイズ変更操作が実行される前に発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、igGridResizing ウィジェットへの参照を取得します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    ui.columnIndex を使用してサイズ変更されている列インデックスを取得します。
    ui.columnKey を使用してサイズ変更されている列キーを取得します。
    ui.desiredWidth を使用して、サイズ変更された列の必要な幅 (最小/最大を強制する前の) を取得します。

    コード サンプル

            //Bind after initialization		
    		$(document).delegate(".selector", "iggridresizingcolumnresizing", function (evt, ui) { 
                //return the triggered event
                evt;
                
                // the index of the column that is resized
                ui.columnIndex;
                
                // the key of the column that is resized
                ui.columnKey;
                
                // the current column width, during resizing
                ui.desiredWidth;
                
                // reference to the igGridResizing widget
                ui.owner;
            
            });
            
            //Initialize
            $(".selector").igGrid({
                features : [
                    {
                        name : "Resizing",
    					columnResizing: function(evt, ui){ ... }
                    }
                ]
            });
    	  
  • columnResizingRefused

    キャンセル可能:
    false

    columnFixing が有効な場合、固定されていない領域の幅が minimalVisibleAreaWidth (columnFixing で定義されるオプション) より小さくなるために固定領域で列をサイズ変更するときに発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、igGridResizing ウィジェットへの参照を取得します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    ui.columnIndex を使用してサイズ変更されている列インデックスを取得します。
    ui.columnKey を使用してサイズ変更されている列キーを取得します。
    ui.desiredWidth を使用して、サイズ変更された列の必要な幅 (最小/最大を強制する前の) を取得します。

    コード サンプル

     
            //Bind after initialization
            $(document).delegate(".selector", "iggridresizingcolumnresizingrefused", function (evt, ui) {
                //return the triggered event
                evt;
    
                // the index of the column that is resized
                ui.columnIndex;
    
                // the key of the column that is resized
                ui.columnKey;
    
                // get the desired width(before min/max coercion) for the resized column
                ui.desiredWidth;
    
                // reference to the igGridResizing widget
                ui.owner;
    
                // get the reference to the igGrid widget
                ui.owner.grid
            });
    
            //Initialize
            $(".selector").igGrid({
                features : [
                    {
                        name : "Resizing",
                        columnResizingRefused: function(evt, ui){ ... }
                    }
                ]
            });
                
  • destroy

    .igGridResizing( "destroy" );

    サイズ変更のウィジェットを破棄します。

    コード サンプル

    		$("#grid1").igGridResizing("destroy");
    	  
  • resize

    .igGridResizing( "resize", column:object, [width:object] );

    ピクセル単位で指定した幅に列をサイズ変更します。幅が指定されていない場合は自動的にサイズ変更します。

    • column
    • タイプ:object
    • 列の識別子。数が与えられた場合、columnIndex として使用され、文字列が与えられた場合、columnKey として使用されます。
    • width
    • タイプ:object
    • オプション
    • 列幅 (ピクセルまたはパーセント)。幅が指定されていない場合、列はその中にあるデータの幅に自動調整されます。

    コード サンプル

    		$(".selector").igGridResizing("resize", 0, 50);
    	  
  • ui-iggrid-resize-line

    サイズ変更中に可視の、サイズ変更行に適用されるクラス。
  • ui-iggrid-resizing-handle

    サイズ変更ハンドルに適用されるクラス。
  • ui-iggrid-resizing-handle-cursor

    カーソルを変更するためのサイズ変更ハンドルおよび本体に適用されるクラス。

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