このオプションは 2017.2 バージョン以降サポートされません。
新規行追加ボタンのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.locale.addRowLabel が使用されます。
locale.addRowLabel オプションを使用します。

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							addRowLabel: "Add a row here"
						}
					]
				});

				//Get
				var label = $("#grid").igGridUpdating("option", "addRowLabel");

				//Set
				$("#grid").igGridUpdating("option", "addRowLabel", "Add a row here");
			 

このオプションは 2017.2 バージョン以降サポートされません。
新規行追加ボタンのタイトルのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.locale.addRowTooltip が使用されます。
locale.addRowTooltip オプションを使用します。

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							addRowTooltip: "Add a row here"
						}
					]
				});

				//Get
				var label = $("#grid").igGridUpdating("option", "addRowTooltip");

				//Set
				$("#grid").igGridUpdating("option", "addRowTooltip", "Add a row here");
			 

このオプションは 2017.2 バージョン以降サポートされません。
編集のキャンセル ボタンのラベルを指定します。showDoneCancelButtons オプションが有効な場合のみに適用可能です。設定されていない場合、$.ig.GridUpdating.locale.cancelLabel が使用されます。
locale.cancelLabel オプションを使用します。.

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							cancelLabel: "Click to cancel"
						}
					]
				});

				//Get
				var label = $("#grid").igGridUpdating("option", "cancelLabel");

				//Set
				$("#grid").igGridUpdating("option", "cancelLabel", "Click to cancel");
			 

このオプションは 2017.2 バージョン以降サポートされません。
編集のキャンセル ボタンのタイトルを指定します。showDoneCancelButtons オプションが有効な場合のみに適用可能です。設定されていない場合は、$ig.GridUpdating.locale.cancelTooltip が使用されます。
locale.cancelTooltip オプションを使用します。

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							cancelTooltip: "Click to cancel"
						}
					]
				});

				//Get
				var label = $("#grid").igGridUpdating("option", "cancelTooltip");

				//Set
				$("#grid").igGridUpdating("option", "cancelTooltip", "Click to cancel");
			 

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

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							columnSettings: [
								{
									columnKey : "Name",
									defaultValue: "Infragistics",
									editorType: "text",
									editorOptions: {
										buttonType: "dropdown",
										listItems: names,
										readOnly: true
									},
									required: true,
									validation: true
								}
							]
						}
					]
				});

				//Get
				var columnSettings = $("#grid").igGridUpdating("option", "columnSettings");
			 

• columnKey

  タイプ:

  string

  デフォルト:

  null

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

  コード サンプル

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

• defaultValue

  タイプ:

  object

  デフォルト:

  null

  新規追加行のセルのデフォルト値を取得または設定します。文字列、数値、日付、ブール値が使用できます。

  コード サンプル

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

• editorOptions

  タイプ:

  object

  デフォルト:

  null

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

  コード サンプル

   
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								columnSettings: [
  									{
  										columnKey : "Name",
  										editorType: "text",
  										editorOptions: {
  										buttonType: "dropdown",
  										listItems: names,
  										readOnly: true
  										}
  									}
  								]
  							}
  						]
  					});
  
  					//Get
  					var columnSettings = $("#grid").igGridUpdating("option", "columnSettings")[0].editorOptions;
  
  					//Set
  					$("#grid").igGridUpdating("option", "columnSettings", columnSettings);
  				 

• editorProvider

  タイプ:

  object

  デフォルト:

  null

  カスタム エディター プロバイダー インスタンスを取得または設定します。カスタム エディターの実装のエントリ ポイントです。
  それは $.ig.EditorProviderDefault を拡張するか、またはそのすべてのメソッドの定義を持っている必要があります。
  $.ig.EditorProviderDefault = $.ig.EditorProviderDefault || $.ig.EditorProvider.extend({
  createEditor: function (updating, key, columnSetting, tabIndex, format, dataType, cellValue, element) {},
  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 igGridUpdating
  						$.ig.EditorProviderNumber = $.ig.EditorProviderNumber || $.ig.EditorProvider.extend({
  							// initialize the editor
  							createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {
  								element = element || $('<input  />');
  								// call parent createEditor
  								this._super(callbacks, key, editorOptions, tabIndex, format, element);
  
  								element.on("keydown", $.proxy(this.keyDown, this));
  								element.on("change", $.proxy(this.change, this));
  
  								this.editor = {};
  								this.editor.element = element;
  									return element;
  							},
  							keyDown: function(evt) {
  								var ui = {};
  								ui.owner = this.editor.element;
  								ui.owner.element = this.editor.element;
  								this.callbacks.keyDown(evt, ui, this.columnKey);
  								// enable "Done" button only for numeric character
  								if ((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && evt.keyCode <= 105)) {
  									this.callbacks.textChanged(evt, ui, this.columnKey);
  								}
  							},
  							change: function (evt) {
  								var ui = {};
  								ui.owner = this.editor.element;
  								ui.owner.element = this.editor.element;
  								this.callbacks.textChanged(evt, ui, this.columnKey);
  							},
  							// get editor value
  							getValue: function () {
  								return parseFloat(this.editor.element.val());
  							},
  							// set editor value
  							setValue: function (val) {
  								return this.editor.element.val(val || 0);
  							},
  							// size the editor into the TD cell
  							setSize: function (width, height) {
  								this.editor.element.css({
  								width: width - 2,
  								height: height - 2,
  								borderWidth: "1px",
  								backgroundPositionY: "9px"
  							});
  							},
  							// focus the editor
  							setFocus: function () {
  								this.editor.element.select();
  							},
  							// validate the editor
  							validator: function () {
  								// no validator
  								return null;
  							},
  							// destroy the editor
  							destroy: function () {
  								this.editor.remove();
  							}
  						});
  
  						//Initialize
  						$("#grid").igGrid({
  							features: [
  								{
  									name: "Updating",
  									columnSettings: [
  										{
  											columnKey : "SafetyStockLevel",
  											editorProvider: new $.ig.EditorProviderNumber()
  										}
  									]
  								}
  							]
  						});
  
  						//Get
  						var columnSettings = $("#grid").igGridUpdating("option", "columnSettings")[0].editorProvider;
  					 

• editorType

  タイプ:

  enumeration

  デフォルト:

  null

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

  メンバー

  • text
  • タイプ:string
  • igTextEditor は作成されます。
  • mask
  • タイプ:string
  • igMaskEditor は作成されます。
  • date
  • タイプ:string
  • igDateEditor が作成されます。
  • datepicker
  • タイプ:string
  • igDatePicker が作成されます。
  • timepicker
  • タイプ:string
  • igTimePicker が作成されます。
  • 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 ファイルが利用可能です。

  コード サンプル

   
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								columnSettings: [
  									{
  										columnKey : "BirthDate",
  										editorType: "datepicker"
  									}
  								]
  							}
  						]
  					});
  					//Get
  					var columnSettings = $("#grid").igGridUpdating("option", "columnSettings")[0].editorType;
  					//Set
  					$("#grid").igGridUpdating("option", "columnSettings", columnSettings);
  				 

• readOnly

  タイプ:

  bool

  デフォルト:

  null

  読み取り専用を取得または設定します。オプションが有効の場合、エディターは使用されずに列内のセルが編集から除外されます。

  コード サンプル

   
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								columnSettings: [
  									{
  										columnKey : "Name",
  										readOnly: true
  									}
  								]
  							}
  						]
  					});
  
  					//Get
  					var columnSettings = $("#grid").igGridUpdating("option", "columnSettings")[0].readOnly;
  
  					//Set
  					$("#grid").igGridUpdating("option", "columnSettings", columnSettings);
  				 

• required

  タイプ:

  bool

  デフォルト:

  null

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

  コード サンプル

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

• validation

  タイプ:

  bool

  デフォルト:

  null

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

  コード サンプル

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

このオプションは 2017.2 バージョン以降サポートされません。
行の削除ボタンのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.locale.deleteRowLabel が使用されます。
locale.deleteRowLabel オプションを使用します。

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							deleteRowLabel: "Delete this row"
						}
					]
				});

				//Get
				var label = $("#grid").igGridUpdating("option", "deleteRowLabel");

				//Set
				$("#grid").igGridUpdating("option", "deleteRowLabel", "Delete this row");
			 

このオプションは 2017.2 バージョン以降サポートされません。
行の削除ボタンのタイトルのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.locale.deleteRowTooltip が使用されます。
locale.deleteRowTooltip オプションを使用します。

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							deleteRowTooltip: "Delete this row"
						}
					]
				});

				//Get
				var label = $("#grid").igGridUpdating("option", "deleteRowTooltip");

				//Set
				$("#grid").igGridUpdating("option", "deleteRowTooltip", "Delete this row");
			 

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

 
				//create dialog widget that inherits from $.ui.igGridModalDialog
				$.widget("ui.CustomDialog", $.ui.igGridModalDialog, {});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Updating",
							dialogWidget: "CustomDialog"
						}
					]
				});

				//Get
				var dialogWidget = $(".selector").igGridUpdating("option", "dialogWidget");
			 

このオプションは 2017.2 バージョン以降サポートされません。
編集の [OK] ボタンのラベルを指定します。showDoneCancelButtons オプションが有効な場合のみに適用可能です。設定されていない場合は、$ig.GridUpdating.locale.doneLabel が使用されます。
locale.doneLabel オプションを使用します。

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							doneLabel: "Fine"
						}
					]
				});

				//Get
				var label = $("#grid").igGridUpdating("option", "doneLabel");

				//Set
				$("#grid").igGridUpdating("option", "doneLabel", "Fine");
			 

このオプションは 2017.2 バージョン以降サポートされません。
編集の [OK] ボタンのタイトルを指定します。showDoneCancelButtons オプションが有効な場合のみに適用可能です。設定されていない場合は、$ig.GridUpdating.locale.doneTooltip が使用されます。
locale.doneTooltip オプションを使用します。

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							doneTooltip: "Fine"
						}
					]
				});

				//Get
				var label = $("#grid").igGridUpdating("option", "doneTooltip");

				//Set
				$("#grid").igGridUpdating("option", "doneTooltip", "Fine");
			 

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

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

新しい行を追加する機能を取得または設定します。
注: igGrid に primaryKey がある場合、アプリケーションは generatePrimaryKeyValue イベントを処理し、セルの値を指定する必要があります。
また、readOnly:true を (columnSettings 内の) primaryKey を指定した列に設定するか、editorOptions:{readOnly:true} を使用することをお勧めします。
デフォルトでは、プライマリ キーのあるセルの値は自動的に生成され、その値はグリッドの行数プラス 1 に等しくなります。
値 true: ヘッダーに [行の追加] ボタンが表示され、そのボタンをクリックするとすべての列にエディターが表示され、新しい行が編集の最後に挿入されます。
値 false: 行の追加機能は無効です。

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							enableAddRow: false
						}
					]
				});

				//Get
				var addEnabled = $("#grid").igGridUpdating("option", "enableAddRow");

				//Set
				$("#grid").igGridUpdating("option", "enableAddRow", false);
			 

例外を有効または無効にする機能を設定または取得します。例外は、グリッドに保留中のトランザクションがあり、データを正しく描画できない可能性がある場合に発生します。

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							enableDataDirtyException: false
						}
					]
				});

				//Get
				var isEnabled = $("#grid").igGridUpdating("option", "enableDataDirtyException");

				//Set
				$("#grid").igGridUpdating("option", "enableDataDirtyException", false);
			 

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

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							enableDeleteRow: false
						}
					]
				});

				//Get
				var isEnabled = $("#grid").igGridUpdating("option", "enableDeleteRow");

				//Set
				$("#grid").igGridUpdating("option", "enableDeleteRow", false);
			 

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

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							excelNavigationMode: true
						}
					]
				});

				//Get
				var isExcelNavMode = $("#grid").igGridUpdating("option", "excelNavigationMode");

				//Set
				$("#grid").igGridUpdating("option", "excelNavigationMode", true);
			 

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

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							horizontalMoveOnEnter: true
						}
					]
				});

				//Get
				var moveOnEnter = $("#grid").igGridUpdating("option", "horizontalMoveOnEnter");

				//Set
				$("#grid").igGridUpdating("option", "horizontalMoveOnEnter", true);
			 

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

• addRowLabel

  タイプ:

  string

  デフォルト:

  ""

  行追加のために編集モードを開始するボタンのラベルを指定します。設定されていない場合、$.ig.GridUpdating.locale.addRowLabel が使用されます。

  コード サンプル

   
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								locale: {
  									addRowLabel: "Add a row here"
  								}
  							}
  						]
  					});
  
  					//Get
  					var label = $("#grid").igGridUpdating("option", "locale").addRowLabel;
  
  					//Set
  					$("#grid").igGridUpdating("option", "locale", { "addRowLabel": "Add a row here" });
  				 

• addRowTooltip

  タイプ:

  string

  デフォルト:

  ""

  行追加のために編集モードを開始するボタンのタイトルを指定します。設定されていない場合、$.ig.GridUpdating.locale.addRowTooltip が使用されます。

  コード サンプル

   
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								locale: {
  									addRowTooltip: "Add a row here"
  								}
  							}
  						]
  					});
  
  					//Get
  					var label = $("#grid").igGridUpdating("option", "locale").addRowTooltip;
  
  					//Set
  					$("#grid").igGridUpdating("option", "locale", { "addRowTooltip": "Add a row here" });
  				 

• cancelLabel

  タイプ:

  string

  デフォルト:

  ""

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

  コード サンプル

   
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								locale: {
  									cancelLabel: "Click to cancel"
  								}
  							}
  						]
  					});
  
  					//Get
  					var label = $("#grid").igGridUpdating("option", "locale").cancelLabel;
  
  					//Set
  					$("#grid").igGridUpdating("option", "locale", { "cancelLabel": "Click to cancel" });
  				 

• cancelTooltip

  タイプ:

  string

  デフォルト:

  ""

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

  コード サンプル

   
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								locale: {
  									cancelTooltip: "Click to cancel"
  								}
  							}
  						]
  					});
  
  					//Get
  					var label = $("#grid").igGridUpdating("option", "locale").cancelTooltip;
  
  					//Set
  					$("#grid").igGridUpdating("option", "locale", { "cancelTooltip": "Click to cancel" });
  				 

• deleteRowLabel

  タイプ:

  string

  デフォルト:

  ""

  削除ボタンのラベルを指定します。設定されていない場合、$.ig.GridUpdating.locale.deleteRowLabel が使用されます。

  コード サンプル

   
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								locale: {
  									deleteRowLabel: "Delete this row"
  								}
  							}
  						]
  					});
  
  					//Get
  					var label = $("#grid").igGridUpdating("option", "locale").deleteRowLabel;
  
  					//Set
  					$("#grid").igGridUpdating("option", "locale", { "deleteRowLabel": "Delete this row" });
  				 

• deleteRowTooltip

  タイプ:

  string

  デフォルト:

  ""

  削除ボタンのタイトルを指定します。 設定されていない場合、$.ig.GridUpdating.locale.deleteRowTooltip が使用されます。

  コード サンプル

   
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								locale: {
  									deleteRowTooltip: "Delete this row"
  								}
  							}
  						]
  					});
  
  					//Get
  					var label = $("#grid").igGridUpdating("option", "locale").deleteRowTooltip;
  
  					//Set
  					$("#grid").igGridUpdating("option", "locale", { "deleteRowTooltip": "Delete this row" });
  				 

• doneLabel

  タイプ:

  string

  デフォルト:

  ""

  編集の [OK] ボタンのラベルを指定します。showDoneCancelButtons オプションが有効な場合のみに適用可能です。設定されていない場合、$.ig.GridUpdating.locale.doneLabel が使用されます。

  コード サンプル

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

• doneTooltip

  タイプ:

  string

  デフォルト:

  ""

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

  コード サンプル

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

行編集ダイアログの描画動作を制御するオプションのリスト。編集モードが '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").igGrid({
						features: [
							{
								name: "Updating",
			rowEditDialogOptions: {
									width: "530px",
									height: "350px",
									dialogTemplateSelector: "#dialogTemplate",
									editorsTemplateSelector: "#editorsTemplate",
									showReadonlyEditors: false,
								}
							}
						]
					});
				</script>
				//Get
				var roweditDialogOptions = $("#grid").igGridUpdating("option", "rowEditDialogOptions");

				//Set
				$("#grid").igGridUpdating("option", "rowEditDialogOptions", rowEditorDialogOptions);
			 

• animationDuration

  タイプ:

  number

  デフォルト:

  200

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

  コード サンプル

   
  					<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>
  
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  										animationDuration: 400,
  										dialogTemplateSelector: "#dialogTemplate",
  										editorsTemplateSelector: "#editorsTemplate"
  								}
  							}
  						]
  					});
  
  					//Get
  					var animationDuration = $("#grid").igGridUpdating("option", "rowEditDialogOptions").animationDuration;
  
  					//Set
  					$("#grid").igGridUpdating("option", "rowEditDialogOptions").animationDuration = 400;
  				 

• containment

  タイプ:

  enumeration

  デフォルト:

  owner

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

  メンバー

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

  コード サンプル

   
  					<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>
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  									containment: "window",
  									dialogTemplateSelector: "#dialogTemplate",
  									editorsTemplateSelector: "#editorsTemplate"
  								}
  							}
  						]
  					});
  					//Get
  					var captionLabel = $("#grid").igGridUpdating("option", "rowEditDialogOptions").containment;
  					//Set
  					$("#grid").igGridUpdating("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>' です。

  コード サンプル

   
  					<script id="editorsTemplate" type="text/html">
  						<tr>
  							<td><strong>${headerText}</strong></td>
  							<td><input data-editor-for-${key}="true"/></td>
  						</tr>
  					</script>
  					//Initialize
  					$("#grid").igGrid({
  						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").igGridUpdating("option", "rowEditDialogOptions").dialogTemplate;
  					//Set
  					$("#grid").igGridUpdating("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>' です。

  コード サンプル

   
  						<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>
  						//Initialize
  						$("#grid").igGrid({
  							features: [
  								{
  									name: "Updating",
  									rowEditDialogOptions: {
  											dialogTemplateSelector: "#dialogTemplate",
  											editorsTemplateSelector: "#editorsTemplate"
  									}
  								}
  							]
  						});
  						//Get
  						var dialogTemplateSelector = $("#grid").igGridUpdating("option", "rowEditDialogOptions").dialogTemplateSelector;
  						//Set
  						$("#grid").igGridUpdating("option", "rowEditDialogOptions").dialogTemplateSelector = "#yourSelector";
  					 

• editorsColumnWidth

  タイプ:

  enumeration

  デフォルト:

  null

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

  メンバー

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

  コード サンプル

   
  					<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>
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  										editorsColumnWidth: 100,
  										dialogTemplateSelector: "#dialogTemplate",
  										editorsTemplateSelector: "#editorsTemplate",
  								}
  							}
  						]
  					});
  					//Get
  					var dialogTemplateSelector = $("#grid").igGridUpdating("option", "rowEditDialogOptions").editorsColumnWidth;
  					//Set
  					$("#grid").igGridUpdating("option", "rowEditDialogOptions").editorsColumnWidth = 100;
  				 

• editorsTemplate

  タイプ:

  string

  デフォルト:

  null

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

  コード サンプル

   
  					<script id="dialogTemplate" type="text/html">
  						<table>
  							<colgroup>
  								<col></col>
  								<col></col>
  							</colgroup>
  							<tbody data-render-tmpl>
  							</tbody>
  						</table>
  					</script>
  
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  										editorsColumnWidth: 100,
  										dialogTemplateSelector: "#dialogTemplate",
  										editorsTemplate: "<tr><td>${headerText}</td><td><input data-editor /></td></tr>"
  								}
  							}
  						]
  					});
  
  					//Get
  					var editorsTemplate = $("#grid").igGridUpdating("option", "rowEditDialogOptions").editorsTemplate;
  
  					//Set
  					$("#grid").igGridUpdating("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>" です。

  コード サンプル

   
  					<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>
  
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  										dialogTemplateSelector: "#dialogTemplate",
  										editorsTemplateSelector: "#editorsTemplate"
  								}
  							}
  						]
  					});
  
  					//Get
  					var editorsTemplateSelector = $("#grid").igGridUpdating("option", "rowEditDialogOptions").editorsTemplateSelector;
  
  					//Set
  					$("#grid").igGridUpdating("option", "rowEditDialogOptions").editorsTemplateSelector = "#yourSelector";
  				 

• height

  タイプ:

  enumeration

  デフォルト:

  350px

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

  メンバー

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

  コード サンプル

   
  					<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>
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  									height: "350px",
  									dialogTemplateSelector: "#dialogTemplate",
  									editorsTemplateSelector: "#editorsTemplate"
  								}
  							}
  						]
  					});
  					//Get
  					var height = $("#grid").igGridUpdating("option", "rowEditDialogOptions").height;
  					//Set
  					$("#grid").igGridUpdating("option", "rowEditDialogOptions").height = "350px";
  				 

• namesColumnWidth

  タイプ:

  enumeration

  デフォルト:

  150px

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

  メンバー

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

  コード サンプル

   
  					<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>
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  									namesColumnWidth: "100px",
  									dialogTemplateSelector: "#dialogTemplate",
  									editorsTemplateSelector: "#editorsTemplate"
  								}
  							}
  						]
  					});
  					//Get
  					var namesColumnWidth = $("#grid").igGridUpdating("option", "rowEditDialogOptions").namesColumnWidth;
  					//Set
  					$("#grid").igGridUpdating("option", "rowEditDialogOptions").namesColumnWidth = "100px";
  				 

• showDoneCancelButtons

  タイプ:

  bool

  デフォルト:

  true

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

  コード サンプル

   
  					<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>
  
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  									showDoneCancelButtons: false,
  									dialogTemplateSelector: "#dialogTemplate",
  									editorsTemplateSelector: "#editorsTemplate"
  								}
  							}
  						]
  					});
  
  					//Get
  					var showDoneCancelButtons = $("#grid").igGridUpdating("option", "rowEditDialogOptions").showDoneCancelButtons;
  
  					//Set
  					$("#grid").igGridUpdating("option", "rowEditDialogOptions").showDoneCancelButtons = false;
  				 

• showEditorsForHiddenColumns

  タイプ:

  bool

  デフォルト:

  false

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

  コード サンプル

   
  					<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>
  
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  									dialogTemplateSelector: "#dialogTemplate",
  									editorsTemplateSelector: "#editorsTemplate",
  									showEditorsForHiddenColumns: false
  								}
  							}
  						]
  					});
  
  					//Get
  					var showEditorsForHiddenColumns = $("#grid").igGridUpdating("option", "rowEditDialogOptions").showEditorsForHiddenColumns;
  
  					//Set
  					$("#grid").igGridUpdating("option", "rowEditDialogOptions").showEditorsForHiddenColumns = true;
  				 

• showReadonlyEditors

  タイプ:

  bool

  デフォルト:

  true

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

  コード サンプル

   
  					<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>
  
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  										dialogTemplateSelector: "#dialogTemplate",
  										editorsTemplateSelector: "#editorsTemplate",
  										showReadonlyEditors: false
  								}
  							}
  						]
  					});
  
  					//Get
  					var showReadonlyEditors = $("#grid").igGridUpdating("option", "rowEditDialogOptions").showReadonlyEditors;
  
  					//Set
  					$("#grid").igGridUpdating("option", "rowEditDialogOptions").showReadonlyEditors = false;
  				 

• width

  タイプ:

  enumeration

  デフォルト:

  415px

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

  メンバー

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

  コード サンプル

   
  					<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>
  					//Initialize
  					$("#grid").igGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  									width: 400,
  									dialogTemplateSelector: "#dialogTemplate",
  									editorsTemplateSelector: "#editorsTemplate"
  								}
  							}
  						]
  					});
  					//Get
  					var width = $("#grid").igGridUpdating("option", "rowEditDialogOptions").width;
  					//Set
  					$("#grid").igGridUpdating("option", "rowEditDialogOptions").width = 500;
  				 

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

 
				//Initialize
				$("#grid").igGrid({
					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 = $("#grid").igGridUpdating("option", "saveChangesErrorHandler");
				//Set
				$("#grid").igGridUpdating("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
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							saveChangesSuccessHandler : function (data) {
								$("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);
							}
						}
					]
				});
				//Get
				var successHandler = $("#grid").igGridUpdating("option", "saveChangesSuccessHandler");
				//Set
				$("#grid").igGridUpdating("option", "saveChangesSuccessHandler", function(data) {
					$("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);
				});
			 

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

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							showDoneCancelButtons: false
						}
					]
				});

				//Get
				var showButton = $("#grid").igGridUpdating("option", "showDoneCancelButtons");

				//Set
				$("#grid").igGridUpdating("option", "showDoneCancelButtons", false);
			 

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

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

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

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

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

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							validation: true
						}
					]
				});

				//Get
				var isValidating = $("#grid").igGridUpdating("option", "validation");

				//Set
				$("#grid").igGridUpdating("option", "validation", true);
			 

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

 
				//Initialize
				$("#grid").igGrid({
					features: [
						{
							name: "Updating",
							wrapAround: false
						}
					]
				});

				//Get
				var wrapAround = $("#grid").igGridUpdating("option", "wrapAround");

				//Set
				$("#grid").igGridUpdating("option", "wrapAround", false);