Sets gets text for add-new-row button. If that is not set, then $.ig.GridUpdating.locale.addRowLabel is used.

 
//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");
			

Sets gets text for title of add-new-row button. If that is not set, then $.ig.GridUpdating.locale.addRowTooltip is used.

 
//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");

Sets gets text for Cancel editing button. If that is not set, then $.ig.GridUpdating.locale.cancelLabel is used.

 
//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");	  

Sets gets text for title of Cancel editing button. If that is not set, then $.ig.GridUpdating.locale.cancelTooltip is used.

 
//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");	   

Sets gets array of settings for each column.

 
//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

  Type:

  string

  Default:

  null

  Sets gets identifier for column. That value should correspond to the "key" of a column in the "columns" of igGrid.

  Code Sample

   
  //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

  Type:

  object

  Default:

  null

  Sets gets default value in cell for add-new-row. That can be string, number, Date or boolean.

  Code Sample

   
  //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

  Type:

  object

  Default:

  null

  Sets gets options supported by corresponding editor such as igEditor, igCombo, or custom editor defined by editorProvider option.
  In addition to specific editor options, it may contain the member "id", which will be set to the element of editor.
  That "id" can be usefull to link cascading igCombo editors.

  Code Sample

   
  //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

  Type:

  object

  Default:

  null

  Sets gets custom editor provider instance (it"s an entry point for implementing your custom editors).
  It should extend $.ig.EditorProviderDefault or it should have definitions of all its methods:
  $.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 () {}
  });.

  Code Sample

  // 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.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

  Type:

  enumeration

  Default:

  null

  Sets type of editor.

  Members

  • text
  • Type:string
  • an igTextEditor will be created.
  • mask
  • Type:string
  • an igMaskEditor will be created.
  • date
  • Type:string
  • an igDateEditor will be created.
  • datepicker
  • Type:string
  • an igDatePicker will be created.
  • numeric
  • Type:string
  • an igNumericEditor will be created.
  • checkbox
  • Type:string
  • an igCheckboxEditor will be created.
  • currency
  • Type:string
  • an igCurrencyEditor will be created.
  • percent
  • Type:string
  • an igPercentEditor will be created.
  • combo
  • Type:string
  • the igCombo editor is created. Note: the css and js files used by ui.igCombo should be available.
  • rating
  • Type:string
  • the igRating editor is created. Note: the css and js files used by ui.igRating should be available.

  Code Sample

   //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

  Type:

  bool

  Default:

  null

  Sets gets read only. If option is enabled, then editor is not used and cells in column are excluded from editing.

  Code Sample

   //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

  Type:

  bool

  Default:

  null

  Sets gets validation for required entry.

  Code Sample

   
  //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

  Type:

  bool

  Default:

  null

  Enables disables validation of editor value.
  Value true: enable validation according to rules of igEditor.
  In case of numeric editors, the validation occurs for min/maxValue including range of values for dataMode, illegal number like "." or "-".
  In case of date editors, the validation occurs for min/maxValue and missing fields in "dateInputFormat".
  In case of mask editors, the validation occurs for not filled required positions in inputMask.
  If "editorOptions" enables "required", then validation for all types of editor has effect.
  Value false: do not enable validation.

  Code Sample

   
  //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); 

Sets gets text for Delete row button. If that is not set, then $.ig.GridUpdating.locale.deleteRowLabel is used.

 
//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");		  

Sets gets text for title of Delete row button. If that is not set, then $.ig.GridUpdating.locale.deleteRowTooltip is used.

 
//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");		  

Sets gets text for Done editing button. If that is not set, then $.ig.GridUpdating.locale.doneLabel is used.

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

Sets gets text for title of Done editing button. If that is not set, then $.ig.GridUpdating.locale.doneTooltip is used.

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

Sets the edit mode.

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

Sets gets add-new-row functionality.
Notes: If igGrid has primaryKey, then application should process generatePrimaryKeyValue event and provide value for a cell.
It is also recommended to set readOnly:true for the column (within columnSettings) with the primaryKey or to use editorOptions:{readOnly:true}.
By default the value of a cell with primary key is generated automatically and its value is equal to number of rows in grid plus 1.
Value true: the "Add Row" button is displayed on header, click on that button shows editors in all columns and new row inserted at the end of editing.
Value false: add-row functionality is disabled.

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

Sets gets ability to enable or disable exception, which is raised when grid has pending transaction and may fail to render data correctly.

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

Sets gets delete-row functionality.
Value true: the "Delete" button is displayed on mouse-over a row and all selected rows are deleted by Delete-key.
Value false: delete-row is disabled.

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

Enables excel navigating style while editing a cell
Value true: Arrows will not navigate inside the edited cell, but will exit the edit mode
and move the focus to the nearest cell.
Value false: Arrows will navigate the cursor inside the edited cell.

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

Enables horizontal move to the right on Enter while editing a cell.
Value true: Pressing Enter will move the focus to the next edited cell on the right
Value false: Pressing Enter will move the focus to the next edited cell on the row below.

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

Enables/disables feature inheritance for the child layouts. NOTE: It only applies for igHierarchicalGrid.

A list of options controlling the rendering behavior of the row edit dialog. If the edit mode is not 'dialog' these have no effect.

 
	 <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

  Type:

  number

  Default:

  200

  Specifies the animation duration for the opening and closing operations.

  Code Sample

   
  		   <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

  Type:

  string

  Default:

  null

  Specifies the caption of the dialog. If not set $.ig.GridUpdating.locale.rowEditDialogCaptionLabel is used.

  Code Sample

   
  	 <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

  Type:

  enumeration

  Default:

  owner

  Controls the containment of the dialog's drag operation.

  Members

  • owner
  • Type:string
  • The row edit dialog will be draggable only in the grid area.
  • window
  • Type:string
  • The row edit dialog will be draggable in the whole window area.

  Code Sample

   
  	  <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

  Type:

  enumeration

  Default:

  null

  Specifies a template to be rendered against the currently edited record (or up-to-date key-value pairs in the case of not yet created records). It may contain an element decorated with the 'data-render-tmpl' attribute to specify where the control should render the editors template specified in the editorsTemplate option. For custom dialogs, the elements can be decorated with 'data-editor-for-<columnKey>' attributes where columnKey is the key of the column that editor or input will be used to edit. If both dialogTemplate and dialogTemplateSelector are specified, dialogTemplateSelector will be used. The default template is '<table><colgroup><col></col><col></col></colgroup><tbody data-render-tmpl></tbody></table>'.

  Code Sample

   
  	 <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

  Type:

  enumeration

  Default:

  null

  Specifies a selector to a template rendered against the currently edited record (or up-to-date key-value pairs in the case of not yet created records). It may contain an element decorated with the 'data-render-tmpl' attribute to specify where the control should render the editors template specified in the editorsTemplate option. For custom dialogs, the elements can be decorated with 'data-editor-for-<columnKey>' attributes where columnKey is the key of the column that editor or input will be used to edit. If both editorsTemplate and editorsTemplateSelector are specified, editorsTemplateSelector will be used. The default template is '<table><colgroup><col></col><col></col></colgroup><tbody data-render-tmpl></tbody></table>'.

  Code Sample

   
  	 <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

  Type:

  enumeration

  Default:

  null

  Controls the width of the column containing the editors in the default row edit dialog. null The width of the column will be left empty for the browser to size automatically.

  Members

  • null
  • Type:object

  • string
  • The width of the column in pixels (100px) or percents (20%).
  • number
  • The width of the column as a number (100) in pixels.

  Code Sample

   
  	 <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

  Type:

  string

  Default:

  null

  Specifies a template to be executed for each column in the grid's column collection (or just the read-write columns if
  showReadonlyEditors is false). Decorate the element to be used as an editor with 'data-editor-for-${key}'. The ${key} template tag should
  be replaced with the chosen templating engine's syntax for rendering values. If any editors for columns are specified in the dialog markup
  they will be exluded from the data the template will be rendered for.
  This property is ignored if the dialog template does not include an element with the 'data-render-tmpl' attribute.
  If both editorsTemplate and editorsTemplateSelector are specified, editorsTemplateSelector will be used.
  The default template is "<tr><td>${headerText}</td><td><input data-editor-for-${key} /></td></tr>".

  Code Sample

   
  	 <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

  Type:

  string

  Default:

  null

  Specifies a selector to a template to be executed for each column in the grid's column collection.
  Decorate the element to be used as an editor with 'data-editor-for-${key}'.
  The ${key} template tag should be replaced with the chosen templating engine's syntax for rendering values. If any editors for columns are
  specified in the dialog markup they will be exluded from the data the template will be rendered for.
  This property is ignored if the dialog markup does not include an element with the 'data-render-tmpl' attribute.
  If both editorsTemplate and editorsTemplateSelector are specified, editorsTemplateSelector will be used.
  The default template is "<tr><td>${headerText}</td><td><input data-editor-for-${key} /></td></tr>".

  Code Sample

   
  	 <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

  Type:

  enumeration

  Default:

  350px

  Controls the default row edit dialog height.

  Members

  • string
  • The dialog window height in pixels (350px).
  • number
  • The dialog window height as a number (350).

  Code Sample

   
  	 <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

  Type:

  enumeration

  Default:

  150px

  Controls the width of the column containing the column names in the default row edit dialog. null The width of the column will be left empty for the browser to size automatically.

  Members

  • null
  • Type:object

  • string
  • The width of the column in pixels (100px) or percents (20%).
  • number
  • The width of the column as a number (100) in pixels.

  Code Sample

   
  	 <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

  Type:

  bool

  Default:

  true

  Controls the visibility of the done and cancel buttons for the dialog.
  If disabled the end-user will be able to stop editing only with the ENTER and ESC keys.

  Code Sample

   
  	 <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

  Type:

  bool

  Default:

  false

  Controls if editors should be rendered for hidden columns.

  Code Sample

  	 <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

  Type:

  bool

  Default:

  true

  Controls if editors should be rendered for read-only columns. If rendered, these editors will be disabled.

  Code Sample

   
  	 <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

  Type:

  enumeration

  Default:

  370px

  Controls the default row edit dialog width.

  Members

  • string
  • The dialog window width in pixels (370px).
  • number
  • The dialog window width as a number (370).

  Code Sample

   
  	 <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;  
  		  

Specifies a custom function to be called when AJAX request to the updateUrl option fails. Receives three arguments - the jqXHR, string describing the type of error and an optional exception object.

 
		//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);
		});
		

Specifies a custom function to be called when AJAX request to the updateUrl option succeeds. Receives as argument the data returned by the server.

 
	  //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);
	  });
		

Sets gets visibility of the end-edit pop-up dialog with Done/Cancel buttons.

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

Sets gets triggers for start edit mode.
Possible values: "click", "dblclick", "F2", "enter" and their combinations separated by coma.
Notes:
The array of strings similar to ["dblclick", "f2"] is also supported.
The keyboard triggers have effect only when "Selection" feature of grid is enabled.
If the "dblclick" is included, then "click" has no effect.

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

The swipe distance when on touch to trigger row delete button to appear.

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

Sets gets option to enable validation for all columns.

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

Controls whether the widget will wrap around the grid when editing reaches a cell in one of the edges of the data view.

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