新規行追加ボタンのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.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");
            

新規行追加ボタンのタイトルのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.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");

編集のキャンセルボタンのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.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");	  

編集のキャンセルボタンのタイトルのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.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 type="number" />');
  				/* 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.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
  $("#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 が作成されます。
  • 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); 

行の削除ボタンのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.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");		  

行の削除ボタンのタイトルのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.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");
          

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

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

編集の完了ボタンのタイトルのテキストを設定または取得します。設定されていない場合は、$ig.GridUpdating.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 のみに適用します。

行編集ダイアログの描画動作を制御するオプションのリスト。編集モードが '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;
            

• captionLabel

  タイプ:

  string

  デフォルト:

  null

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

  コード サンプル

   
       <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: {
                      captionLabel: "CaptionLabel",
                      dialogTemplateSelector: "#dialogTemplate",
                      editorsTemplateSelector: "#editorsTemplate"
          }
          }
      ]
  });
              
  //Get
  var captionLabel = $("#grid").igGridUpdating("option", "rowEditDialogOptions").captionLabel;
              
  //Set
  $("#grid").igGridUpdating("option", "rowEditDialogOptions").captionLabel = "New Caption Label";
            

• 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
  • タイプ:string
  • 数値 (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
  • タイプ:string
  • 数値 (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

  デフォルト:

  400px

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

  メンバー

  • string
  • タイプ:string
  • ピクセルでのダイアログ ウィンドウ幅 (400 px)。
  • number
  • タイプ:string
  • 数値のダイアログ ウィンドウの幅 (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);