タッチ環境で子の追加ボタンのラベルを指定します。

 
      //Initialize
						$(".selector").igTreeGrid({
					features:	[
								{
								name:	"Updating",
								addChildButtonLabel: "add child"
							}
							]
						});
												
				//Get
				var	childButtonLabel	=	$(".selector").igTreeGridUpdating("option",	"addChildButtonLabel");
												
				//Set
				$(".selector").igTreeGridUpdating("option",	"addChildButtonLabel",	"add child");
      

子を追加のツールチップ テキストを指定します。

 
      //Initialize
						$(".selector").igTreeGrid({
					features:	[
								{
								name:	"Updating",
								addChildTooltip: "add child"
							}
							]
						});
												
				//Get
				var	childTooltip	=	$(".selector").igTreeGridUpdating("option",	"addChildTooltip");
												
				//Set
				$(".selector").igTreeGridUpdating("option",	"addChildTooltip",	"Add	a	row	here");
      

新規行追加ボタンのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.locale.addRowLabel が使用されます。

 
      //Initialize
      $(".selector").igTreeGrid({
	    features: [
        {
		      name: "Updating",
		      addRowLabel: "Add a row here"
    	  }
       ]
      });
            
    //Get
    var label = $(".selector").igTreeGridUpdating("option", "addRowLabel");
            
    //Set
    $(".selector").igTreeGridUpdating("option", "addRowLabel", "Add a row here");
      

新規行追加ボタンのタイトルのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.locale.addRowTooltip が使用されます。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    addRowTooltip: "Add a row here"
    	}
    ]
});
            
//Get
var label = $(".selector").igTreeGridUpdating("option", "addRowTooltip");
            
//Set
$(".selector).igTreeGridUpdating("option", "addRowTooltip", "Add a row here");
      

編集のキャンセル ボタンのラベルを指定します (showDoneCancelButtons オプションが有効な場合のみ適用可能)。設定されていない場合は、$ig.GridUpdating.locale.cancelLabel が使用されます。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    cancelLabel: "Click to cancel"
    	}
    ]
});
            
//Get
var label = $(".selector").igTreeGridUpdating("option", "cancelLabel");
            
//Set
$(".selector").igTreeGridUpdating("option", "cancelLabel", "Click to cancel");
      

編集のキャンセルボタンのタイトルを指定します(showDoneCancelButtons オプションが有効な場合のみ適用可能)。設定されていない場合は、$ig.GridUpdating.locale.cancelTooltip が使用されます。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    cancelTooltip: "Click to cancel"
    	}
    ]
});
            
//Get
var label = $(".selector").igTreeGridUpdating("option", "cancelTooltip");
            
//Set
$(".selector").igTreeGridUpdating("option", "cancelTooltip", "Click to cancel");
      

各列の設定の配列を取得または設定します。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    columnSettings: [
                {
                    columnKey : "Name",
                    defaultValue: "Infragistics",
                    editorType: "text",
                    editorOptions: {
							button: "dropdown",
							listItems: names,
							readOnly: true,
							dropDownOnReadOnly: true
						},
                    required: true,
                    validation: true
                }
            ]
    	}
    ]
});
            
//Get
var columnSettings = $(".selector").igTreeGridUpdating("option", "columnSettings");
            
//Set
$(".selector").igTreeGridUpdating("option", "columnSettings", columnSettings);    
      

• columnKey

  タイプ:

  string

  デフォルト:

  null

  列の識別子を取得または設定します。その値は、igGrid の「columns」内の列の「key」に対応する必要があります。

  コード サンプル

   
            //Initialize
  $(".selector").igTreeGrid({
  	features: [
          {
  		    name: "Updating",
  		    columnSettings: [
                  {
                      columnKey : "Name",
                      defaultValue: "Infragistics"
                  }
              ]
      	}
      ]
  });
              
  //Get
  var columnSettings = $(".selector").igTreeGridUpdating("option", "columnSettings")[0].columnKey;
              
  //Set
  $(".selector").igTreeGridUpdating("option", "columnSettings", columnSettings); 
            

• defaultValue

  タイプ:

  object

  デフォルト:

  null

  新規行を追加行する際の列のデフォルト値を指定します。編集モードで新しい行を追加する場合、値が列エディターであらかじめ定義されます (列が読み取り専用の場合)。値は、グリッドの列コレクションの列に指定されたタイプです。

  コード サンプル

   
            //Initialize
  $(".selector").igTreeGrid({
  	features: [
          {
  		    name: "Updating",
  		    columnSettings: [
                  {
                      columnKey : "Name",
                      defaultValue: "Infragistics"
                  }
              ]
      	}
      ]
  });
              
  //Get
  var columnSettings = $(".selector").igTreeGridUpdating("option", "columnSettings")[0].defaultValue;
              
  //Set
  $(".selector").igTreeGridUpdating("option", "columnSettings", columnSettings);
            

• editorOptions

  タイプ:

  object

  デフォルト:

  null

  igEditor、igCombo、または editorProvider オプションが定義するカスタム エディターなどの、対応するエディターがサポートするオプションを設定・取得します。
  特定の編集オプションに加え、エディターの要素に設定されるメンバー id を含む場合があります。
  "id" は、カスケード igCombo エディターにリンクするために便利です。

  コード サンプル

   
            //Initialize
  $(".selector").igTreeGrid({
  	features: [
          {
  		    name: "Updating",
  		    columnSettings: [
                  {
                      columnKey : "Name",
                      editorType: "text",
                      editorOptions: {
  							button: "dropdown",
  							listItems: names,
  							readOnly: true,
  							dropDownOnReadOnly: true
  						}
                  }
              ]
      	}
      ]
  });
              
  //Get
  var columnSettings = $(".selector").igTreeGridUpdating("option", "columnSettings")[0].editorOptions;
              
  //Set
  $(".selector").igTreeGridUpdating("option", "columnSettings", columnSettings);
            

• editorProvider

  タイプ:

  object

  デフォルト:

  null

  カスタム エディター プロバイダー インスタンスを指定します。エディター プロバイダーの詳細については、詳細については、カスタム エディター プロバイダーの実装およびigCombo エディター プロバイダーの操作を参照してください。
  $.ig.EditorProviderDefault を拡張または以下のメソッドの定義を持っている必要があります。
  $.ig.EditorProvider = $.ig.EditorProvider|| $.ig.EditorProvider.extend({
  createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {},
  attachErrorEvents: function (errorShowing, errorShown, errorHidden) {},
  getEditor: function () {},
  refreshValue: function () {},
  getValue: function () {},
  setValue: function (val) {},
  setSize: function (width, height) {},
  setFocus: function () {},
  removeFromParent: function () {},
  destroy: function () {},
  validator: function () {},
  validate: function (noLabel) {},
  isValid: function () {}
  });

  コード サンプル

   
            // This editor provider demonstrates how to wrap HTML 5 number INPUT into editor provider for the igTreeGridUpdating
  $.ig.EditorProviderNumber = $.ig.EditorProviderNumber || $.ig.EditorProvider.extend({
  	// initialize the editor
  	createEditor: function (updating, key, columnSetting, tabIndex) {
  		// updating - reference to igTreeGridUpdating feature
  		// key - the key of the colomn. There is only one editor instance per column
  		// columnSetting - settings set by the user in iGridUpdating.columnSettings[<index>]
  		// tabIndex - the tabIndex of the editor
  		var element = $('<input type="number" />');
  
  		this.editor = {element : element};
  		
  		element.on("keydown", function() {
  			// notify igTreeGridUpdating that the value is changed
  			updating._notifyChanged();
  		});
  		return element;
  	},
  	// get editor value
  	getValue: function () {
  		return parseFloat(this.editor.val());
  	},
  	// set editor value
  	setValue: function (val) {
  		return this.editor.val(val || 0);
  	},
  	// size the editor into the TD cell
  	setSize: function (width, height) {
  	  this.editor.css({
  			width: width - 2,
  			height: height - 2,
  			borderWidth: "1px",
  			backgroundPositionY: "9px"
  	  });
  	},
  	// focus the editor
  	setFocus: function () {
  		this.editor[0].select();
  	},
  	// validate the editor
  	validator: function () {
  		// no validator
  		return null;
  	},
  	// destroy the editor
  	destroy: function () {
  		this.editor.remove();
  	}
  });
  
  //Initialize
  $(".selector").igTreeGrid({
  	features: [
          {
  		    name: "Updating",
  		    columnSettings: [
                  {
                      columnKey : "SafetyStockLevel",
                      editorProvider: new $.ig.EditorProviderNumber()
                  }
              ]
      	}
      ]
  });
              
  //Get
  var columnSettings = $(".selector").igTreeGridUpdating("option", "columnSettings")[0].editorProvider;
            

• editorType

  タイプ:

  enumeration

  デフォルト:

  null

  エディターのタイプを設定します。

  メンバー

  • text
  • タイプ:string
  • igTextEditor は作成されます。
  • mask
  • タイプ:string
  • igMaskEditor は作成されます。
  • date
  • タイプ:string
  • igDateEditor が作成されます。
  • datepicker
  • タイプ:string
  • igDatePicker が作成されます。注: jquery.ui.datepicker によって使用される css および js ファイルが利用可能です。
  • numeric
  • タイプ:string
  • igNumericEditor が作成されます。
  • checkbox
  • タイプ:string
  • igCheckboxEditor が作成されます。
  • currency
  • タイプ:string
  • igCurrencyEditor が作成されます。
  • percent
  • タイプ:string
  • igPercentEditor が作成されます。
  • combo
  • タイプ:string
  • igCombo エディターが作成されます。注: ui.igCombo によって使用される css および js ファイルが利用可能です。
  • rating
  • タイプ:string
  • igRating エディターが作成されます。注: ui.igRating によって使用される css および js ファイルが利用可能です。

  コード サンプル

   
            $(".selector").igTreeGrid({
  	features: [
          {
  		    name: "Updating",
  		    columnSettings: [
                  {
                      columnKey : "BirthDate",
                      editorType: "datepicker"
                  }
              ]
      	}
      ]
  });
              
  //Get
  var columnSettings = $(".selector").igTreeGridUpdating("option", "columnSettings")[0].editorType;
              
  //Set
  $(".selector").igTreeGridUpdating("option", "columnSettings", columnSettings); 
            

• readOnly

  タイプ:

  bool

  デフォルト:

  null

  読み取り専用かどうかを指定します。'cell' および 'row' editMode の場合、読み取り専用列に作成されるエディターはありません。showReadonlyEditors を有効にした 'dialog' モードで無効なエディターを表示します。

  コード サンプル

   
            $(".selector").igTreeGrid({
  	features: [
          {
  		    name: "Updating",
  		    columnSettings: [
                  {
                      columnKey : "Name",
                      readOnly: true
                  }
              ]
      	}
      ]
  });
              
  //Get
  var columnSettings = $(".selector").igTreeGridUpdating("option", "columnSettings")[0].readOnly;
              
  //Set
  $(".selector").igTreeGridUpdating("option", "columnSettings", columnSettings);
            

• required

  タイプ:

  bool

  デフォルト:

  null

  必須入力の検証を取得または設定します。

  コード サンプル

   
            /Initialize
  $(".selector").igTreeGrid({
  	features: [
          {
  		    name: "Updating",
  		    columnSettings: [
                  {
                      columnKey : "Name",
                      required: true
                  }
              ]
      	}
      ]
  });
              
  //Get
  var columnSettings = $(".selector").igTreeGridUpdating("option", "columnSettings")[0].required;
              
  //Set
  $(".selector").igTreeGridUpdating("option", "columnSettings", columnSettings);
            

• validation

  タイプ:

  bool

  デフォルト:

  null

  エディター値の検証を有効/無効にします。
  値が trueの場合: igEditor のルールにしたがって検証を有効にします。
  数値エディターの場合、dataMode の値の範囲、「.」や「-」などの不正な数を含む min/maxValue の検証が発生します。
  日付エディターの場合、min/maxValue および「dateInputFormat」内の欠けているフィールドの検証が発生します。
  マスク エディターの場合、inputMask 内の埋まっていない必須の位置の検証が発生します。
  「editorOptions」が「required」を有効にする場合、エディターのすべてのタイプについての検証が有効になります。
  値が false の場合: 検証を有効にしません。

  コード サンプル

   
            //Initialize
  $(".selector").igTreeGrid({
  	features: [
          {
  		    name: "Updating",
  		    columnSettings: [
                  {
                      columnKey : "Name",
                      validation: true
                  }
              ]
      	}
      ]
  });
              
  //Get
  var columnSettings = $(".selector").igTreeGridUpdating("option", "columnSettings")[0].validation;
              
  //Set
  $(".selector").igTreeGridUpdating("option", "columnSettings", columnSettings);
            

行の削除ボタンのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.locale.deleteRowLabel が使用されます。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    deleteRowLabel: "Delete this row"
    	}
    ]
});
            
//Get
var label = $(".selector").igTreeGridUpdating("option", "deleteRowLabel");
            
//Set
$(".selector").igTreeGridUpdating("option", "deleteRowLabel", "Delete this row");
      

行の削除ボタンのタイトルのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.locale.deleteRowTooltip が使用されます。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    deleteRowTooltip: "Delete this row"
    	}
    ]
});
            
//Get
var label = $(".selector").igTreeGridUpdating("option", "deleteRowTooltip");
            
//Set
$(".selector").igTreeGridUpdating("option", "deleteRowTooltip", "Delete this row"); 
      

使用するダイアログ ウィジェットの名前。$.ui.igGridModalDialog から継承します。このプロパティを使用する方法については、Extending igGrid Modal Dialogトピックを参照してください。

編集の完了ボタンのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.locale.doneLabel が使用されます。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    doneLabel: "Fine"
    	}
    ]
});
            
//Get
var label = $(".selector").igTreeGridUpdating("option", "doneLabel");
            
//Set
$(".selector").igTreeGridUpdating("option", "doneLabel", "Fine");
      

編集の完了ボタンのタイトルを指定します (showDoneCancelButtons オプションが有効な場合のみ適用可能)。設定されていない場合は、$ig.GridUpdating.locale.doneTooltip が使用されます。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    doneTooltip: "Fine"
    	}
    ]
});
            
//Get
var label = $(".selector").igTreeGridUpdating("option", "doneTooltip");
            
//Set
$(".selector").igTreeGridUpdating("option", "doneTooltip", "Fine");
      

編集モードを設定します。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    editMode: "dialog"
    	}
    ]
});
            
//Get
var mode = $(".selector").igTreeGridUpdating("option", "editMode");
            
//Set
$(".selector").igTreeGridUpdating("option", "editMode", "dialog");
      

行への子の追加を有効または無効にするかどうかを指定します。

 
      //Initialize
$(".selector").igTreeGrid({
	features:	[
								{
						name:	"Updating",
						enableAddChild:	true
					}
				]
});
												
//Get
var	addChild	=	$(".selector").igTreeGridUpdating("option",	"enableAddChild");
												
//Set
$(".selector").igTreeGridUpdating("option",	"enableAddChild",	false);	
      

UI で新しい行の追加を有効にするかを指定します。エンドユーザーがボタンをクリックした場合、編集モードはダイアログまたは行の editMode (editMode が 'row' または 'cell’ の場合) のルックアンドフィールを模倣して初期化します ( editMode が 'row’ または 'cell’ の場合)。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    enableAddRow: false
    	}
    ]
});
            
//Get
var addEnabled = $(".selector").igTreeGridUpdating("option", "enableAddRow");
            
//Set
$(".selector").igTreeGridUpdating("option", "enableAddRow", false); 
      

保留中のトランザクションがデータソースにある場合にグリッドのデータ ビューが変更する際に例外がスローされるかどうかを指定します。データソースが並べ替え、フィルタリング、グループ化、またはページング操作を実行するときにデータビューが変わります。また例外のスローが操作の完了を妨げます。データ ビュー操作が完了する前にすべての保留中のトランザクションをコミットする必要があります。トランザクションのコミットは、手動でグリッドのcommit]]機能または自動的に autoCommit を 'true’に設定して完了できます。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    enableDataDirtyException: false
    	}
    ]
});
            
//Get
var isEnabled = $(".selector").igTreeGridUpdating("option", "enableDataDirtyException");
            
//Set
$(".selector").igTreeGridUpdating("option", "enableDataDirtyException", false);  
      

行を削除する機能を取得または設定します。
値 true: マウスを上に置いた行に [削除] ボタンが表示されます。[Delete] キーですべての選択行が削除されます。
値 false: 行の削除は無効です。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    enableDeleteRow: false
    	}
    ]
});
            
//Get
var isEnabled = $(".selector").igTreeGridUpdating("option", "enableDeleteRow");
            
//Set
$(".selector").igTreeGridUpdating("option", "enableDeleteRow", false); 
      

セルの編集時にエクセルのナビゲーション スタイルを有効にします。
値 true: 矢印を編集セル内に移動できません。ただし、編集モードおよを終了して、
一番近いセルにフォーカスを移動できます。
値 false: 矢印は編集セル内のカーソルを移動できます。

 
       //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    excelNavigationMode: true
    	}
    ]
});
            
//Get
var isExcelNavMode = $(".selector").igTreeGridUpdating("option", "excelNavigationMode");
            
//Set
$(".selector").igTreeGridUpdating("option", "excelNavigationMode", true); 
      

セルの編集中に Enter で右への水平移動を有効にします。
値 true: Enter を押すと右隣の編集済みのセルへフォーカスを移動します。
値 false: Enter を押すと下行の次の編集済みのセルへフォーカスを移動します。

 
       //Initialize
      $(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    horizontalMoveOnEnter: true
    	}
    ]
});
            
//Get
var moveOnEnter = $(".selector").igTreeGridUpdating("option", "horizontalMoveOnEnter");
            
//Set
$(".selector").igTreeGridUpdating("option", "horizontalMoveOnEnter", true);
      

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

行編集ダイアログの描画動作を制御するオプションのリスト。編集モードが 'dialog' ではない場合、このオプションは適用されません。

 
     <script id="dialogTemplate" type="text/html">
        <table>
             <colgroup>
             <col></col>
             <col></col>
        </colgroup>
        <tbody data-render-tmpl>
        </tbody>
       </table>
     </script>
       <script id="editorsTemplate" type="text/html">
       <tr>
       <td><strong>${headerText}</strong></td>
       <td><input data-editor-for-${key}="true"/></td>
       </tr>
       </script>
       <script>
      //Initialize
      $("#grid").igTreeGrid({
        features: [
         {
            name: "Updating",
            rowEditDialogOptions: {
                    width: "530px",
                    height: "350px",
                    dialogTemplateSelector: "#dialogTemplate",
                    editorsTemplateSelector: "#editorsTemplate",
                    showReadonlyEditors: false,
            }
         }
        ]
       });
     </script>        
            
//Get
var roweditDialogOptions = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions");
            
//Set
$("#grid").igTreeGridUpdating("option", "rowEditDialogOptions", rowEditingOptions);   
      

• animationDuration

  タイプ:

  number

  デフォルト:

  200

  開く操作および閉じる操作のアニメーション期間を指定します。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      animationDuration: 400,
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
              
  //Get
  var animationDuration = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").animationDuration;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").animationDuration = 400;
            

• captionLabel

  タイプ:

  string

  デフォルト:

  null

  ダイアログのキャプションを指定します設定されていない場合は、$ig.GridUpdating.locale.rowEditDialogCaptionLabel が使用されます。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      captionLabel: "CaptionLabel",
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
              
  //Get
  var captionLabel = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").captionLabel;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").captionLabel = "New Caption Label";
            

• containment

  タイプ:

  enumeration

  デフォルト:

  owner

  ダイアログのドラッグ操作のコンテインメントを制御します。

  メンバー

  • owner
  • タイプ:string
  • 行編集ダイアログはグリッド領域のみにドラッグ可能です。
  • window
  • タイプ:string
  • 行編集ダイアログはウィンドウ領域の全体にドラッグ可能です。

  コード サンプル

   
            //Initialize
  $("#grid").igTreeGrid({
      features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      containment: "window",
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
              
  //Get
  var captionLabel = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").containment;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").containment = "window";
          

• dialogTemplate

  タイプ:

  enumeration

  デフォルト:

  null

  編集中のレコードに対し描画されるテンプレート (またはレコードを作成していない場合は、最新のキー値のペア) を指定します。コントロールが editorsTemplate オプションで指定されたエディターのテンプレートを描画する場所を指定する、「data-render-tmpl」属性を使用する要素を含む場合があります。カスタム ダイアログの場合、要素に 'data-editor-for-<columnKey>' 属性を追加できます。columnKey は、編集でエディターまたは入力により使用される列のキーです。 dialogTemplate と dialogTemplateSelector の両方が設定されている場合は、dialogTemplateSelector が使用されます。 デフォルト テンプレートは、'<table><colgroup><col></col><col></col></colgroup><tbody data-render-tmpl></tbody></table>' です。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      editorsColumnWidth: 100,
                      dialogTemplate: "<table><colgroup><col></col><col></col></colgroup><tbody data-render-tmpl></tbody></table>" ,
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
  //Get
  var dialogTemplate = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").dialogTemplate;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").dialogTemplate = "<table><colgroup><col></col><col></col></colgroup><tbody data-render-tmpl></tbody></table>";
  
            

• dialogTemplateSelector

  タイプ:

  enumeration

  デフォルト:

  null

  編集中のレコードに対し描画されるテンプレートにセレクター (またはレコードを作成していない場合は、最新キー値のペア) を指定します。コントロールが editorsTemplate オプションで指定されたエディターのテンプレートを描画する場所を指定する、「data-render-tmpl」属性を使用する要素を含む場合があります。カスタム ダイアログの場合、要素に 'data-editor-for-<columnKey>' 属性を追加できます。columnKey は、編集でエディターまたは入力により使用される列のキーです。 editorsTemplate と editorsTemplateSelector の両方が設定されている場合、editorsTemplateSelector が使用されます。 デフォルト テンプレートは、'<table><colgroup><col></col><col></col></colgroup><tbody data-render-tmpl></tbody></table>' です。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
  //Get
  var dialogTemplateSelector = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").dialogTemplateSelector;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").dialogTemplateSelector = "#yourSelector";
            

• editorsColumnWidth

  タイプ:

  enumeration

  デフォルト:

  null

  デフォルトの行編集ダイアログのエディターを含む列の幅を制御します。

  メンバー

  • string
  • タイプ:string
  • ピクセル単位 (100px) またはパーセンテージ (20%) の列の幅。
  • number
  • タイプ:number
  • 数値 (100) としてのピクセル単位の列の幅。
  • null
  • タイプ:object
  • ブラウザーが自動的にサイズを設定するために、列の幅が空です。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      editorsColumnWidth: 100,
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate",
          }
          }
      ]
  });
  //Get
  var dialogTemplateSelector = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").editorsColumnWidth;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").editorsColumnWidth = 100;
            

• editorsTemplate

  タイプ:

  string

  デフォルト:

  null

  グリッドの列コレクション (showReadonlyEditors が false の場合、書き込む可能な列のみ) の各列のために実行するテンプレートを指定します。
  showReadonlyEditors is false).エディターとして使用される要素を 'data-editor-for-${key}' と設定します。The ${key} template tag should
  ${key} テンプレート タグを指定したテンプレート エンジンの値の描画の構文と置き換えます。列のエディターがダイアログ マークアップで指定される場合、テンプレートが描画されるデータから除外されます。
  they will be exluded from the data the template will be rendered for.
  ダイアログ テンプレートが 'data-render-tmpl' 属性を持つ要素が含まれていない場合、このプロパティは無視されます。
  editorsTemplate および editorsTemplateSelector の両方が指定される場合、editorsTemplateSelector が使用されます。
  デフォルト テンプレートは "<tr><td>${headerText}</td><td><input data-editor-for-${key} /></td></tr>" です。

  コード サンプル

   
                   //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      editorsColumnWidth: 100,
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplate: "<tr><td>${headerText}</td><td><input data-editor /></td></tr>"
          }
          }
      ]
  });
  //Get
  var editorsTemplate = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").editorsTemplate;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").editorsTemplate = "<tr><td>${headerText}</td><td><input data-editor /></td></tr>";
            

• editorsTemplateSelector

  タイプ:

  string

  デフォルト:

  null

  グリッドの列コレクションの各列のために実行するテンプレートへのセレクターを指定します。
  エディターとして使用される要素を 'data-editor-for-${key}' と設定します。
  ${key} テンプレート タグを指定したテンプレート エンジンの値の描画の構文と置き換えます。
  列のエディターがダイアログ マークアップで指定される場合、テンプレートが描画されるデータから除外されます。
  ダイアログ マークアップが 'data-render-tmpl' 属性を持つ要素が含まれていない場合、このプロパティは無視されます。
  editorsTemplate および editorsTemplateSelector の両方が指定される場合、editorsTemplateSelector が使用されます。
  デフォルト テンプレートは "<tr><td>${headerText}</td><td><input data-editor-for-$(key) /></td></tr>" です。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
  //Get
  var editorsTemplateSelector = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").editorsTemplateSelector;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").editorsTemplateSelector = "#yourSelector";
            

• height

  タイプ:

  enumeration

  デフォルト:

  350px

  デフォルトの行編集ダイアログの高さを制御します。

  メンバー

  • string
  • タイプ:string
  • ピクセルでのダイアログ ウィンドウの高さ (350px)。
  • number
  • タイプ:number
  • 数値のダイアログ ウィンドウの高さ (350)。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      height: "350px",
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
  //Get
  var height = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").height;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").height = "350px";
            

• namesColumnWidth

  タイプ:

  enumeration

  デフォルト:

  150px

  デフォルトの行編集ダイアログの列名を含む列の幅を制御します。

  メンバー

  • string
  • タイプ:string
  • ピクセル単位 (100px) またはパーセンテージ (20%) の列の幅。
  • number
  • タイプ:number
  • 数値 (100) としてのピクセル単位の列の幅。
  • null
  • タイプ:object
  • ブラウザーが自動的にサイズを設定するために、列の幅が空です。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      namesColumnWidth: "100px",
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
  //Get
  var namesColumnWidth = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").namesColumnWidth;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").namesColumnWidth = "100px";
            

• showDoneCancelButtons

  タイプ:

  bool

  デフォルト:

  true

  ダイアログの [OK] および [キャンセル] ボタンの表示状態を制御します。
  無効な場合、ENTER および ESC キーを押すと編集を中止できます。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      showDoneCancelButtons: false,
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
              
  //Get
  var showDoneCancelButtons = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").showDoneCancelButtons;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").showDoneCancelButtons = false;   
            

• showEditorsForHiddenColumns

  タイプ:

  bool

  デフォルト:

  false

  エディターが非表示列で描画されるかどうかを制御します。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate",
                      showEditorsForHiddenColumns: false
          }
          }
      ]
  });
              
  //Get
  var showEditorsForHiddenColumns = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").showEditorsForHiddenColumns;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").showEditorsForHiddenColumns = true;   
            

• showReadonlyEditors

  タイプ:

  bool

  デフォルト:

  true

  エディターが読み取り専用列で描画されるかどうかを制御します。描画される場合、このエディターは無効になります。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate",
                      showReadonlyEditors: false
          }
          }
      ]
  });
              
  //Get
  var showReadonlyEditors = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").showReadonlyEditors;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").showReadonlyEditors = false;   
            

• width

  タイプ:

  enumeration

  デフォルト:

  400px

  デフォルトの行編集ダイアログ幅を制御します。

  メンバー

  • string
  • タイプ:string
  • ピクセルでのダイアログ ウィンドウ幅 (400 px)。
  • number
  • タイプ:number
  • 数値のダイアログ ウィンドウの幅 (400)。

  コード サンプル

   
                  //Initialize
        $("#grid").igTreeGrid({
          features: [
            {
              name: "Updating",
              rowEditDialogOptions: {
                      width: 400,
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
              
  //Get
  var width = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").width;
              
  //Set
  $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").width = 500;
            

updateUrl オプションへの AJAX リクエストに失敗したときに呼び出すカスタム関数を指定します。3 つの引数を取得します - jqXHR、エラーのタイプを説明する文字列、およびオプションの例外オブジェクト。

       //Initialize
        $(".selector").igTreeGrid({
            features: [
                {
                    name: "Updating",
                    saveChangesErrorHandler : function (jqXHR, textStatus, errorThrown) {
                        $("#message").text("An error occurred while saving the changes. Error details: " + textStatus).fadeIn(3000).fadeOut(5000);
                    }
                }
            ]
        });

        //Get
        var errorHandler = $(".selector").igTreeGridUpdating("option", "saveChangesErrorHandler");

        //Set
        $(".selector").igTreeGridUpdating("option", "saveChangesErrorHandler", function(jqXHR, textStatus, errorThrown) {
            $("#message").text("An error occurred while saving the changes. Error details: " + textStatus).fadeIn(3000).fadeOut(5000);
        });
      

updateUrl オプションへの AJAX リクエストに成功したときに呼び出すカスタム関数を指定します。サーバーから返されたデータを引数として受けます。

 
       //Initialize
      $(".selector").igTreeGrid({
          features: [
              {
                  name: "Updating",
                  saveChangesSuccessHandler : function (data) {
                      $("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);
                  }
              }
          ]
      });

      //Get
      var successHandler = $(".selector").igTreeGridUpdating("option", "saveChangesSuccessHandler");

      //Set
      $(".selector").igTreeGridUpdating("option", "saveChangesSuccessHandler", function(data) {
          $("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);
      });
      

[完了] ボタンと [キャンセル] ボタンがある編集終了ポップアップ ダイアログの可視性を取得または設定します。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    showDoneCancelButtons: false
    	}
    ]
});
            
//Get
var showButton = $(".selector").igTreeGridUpdating("option", "showDoneCancelButtons");
            
//Set
$(".selector").igTreeGridUpdating("option", "showDoneCancelButtons", false);
      

編集モードを開始するトリガーを取得または設定します。
利用可能な値: "click"、"dblclick"、"F2"、"enter"、およびコンマで区切ったこれらの組み合わせ。
注:
["dblclick", "f2"] に似た文字列の配列もサポートされています。
キーボードのトリガーは、グリッドの「Selection」機能が有効な場合のみ有効です。
'dblclick' が含まれる場合、'click' の効果はありません。

 
      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    startEditTriggers: "dblclick,F2"
    	}
    ]
});
            
//Get
var triggers = $(".selector").igTreeGridUpdating("option", "startEditTriggers");
            
//Set
$(".selector").igTreeGridUpdating("option", "startEditTriggers", "dblclick,F2"); 
      

タッチ環境の場合、行の削除ボタンの表示をトリガーするスワイプ距離。

 
      //Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Updating",
            swipeDistance: "200px"
        }
    ]
});
            
//Get
var triggers = $(".selector").igTreeGridUpdating("option", "swipeDistance");
            
//Set
$(".selector").igTreeGridUpdating("option", "swipeDistance", "200px");
      

すべての列の検証を有効にするオプションを設定または取得します。

      //Initialize
$(".selector").igTreeGrid({
	features: [
        {
		    name: "Updating",
		    validation: true
    	}
    ]
});
            
//Get
var isValidating = $(".selector").igTreeGridUpdating("option", "validation");
            
//Set
$(".selector").igTreeGridUpdating("option", "validation", true);
      

データ ビューのいずれかの端にあるセルの編集時にウィジェットがグリッドをラップするかどうかを制御します。

 
//Initialize
$("#grid").igGrid({
	features: [
        {
		    name: "Updating",
		    wrapAround: false
    	}
    ]
});
            
//Get
var wrapAround = $("#grid").igGridUpdating("option", "wrapAround");
            
//Set
$("#grid").igGridUpdating("option", "wrapAround", false);