Specifies the label of the add child button in touch environment.

 
				//Initialize
				$(".selector").igTreeGrid({
					features:	[
						{
							name:	"Updating",
							addChildButtonLabel: "add child"
						}
					]
				});

				//Get
				var	childButtonLabel	=	$(".selector").igTreeGridUpdating("option",	"addChildButtonLabel");

				//Set
				$(".selector").igTreeGridUpdating("option",	"addChildButtonLabel",	"add child");
			 

Specifies the add child tooltip text.

 
				//Initialize
				$(".selector").igTreeGrid({
					features:	[
						{
							name:	"Updating",
							addChildTooltip: "add child"
						}
					]
				});

				//Get
				var	childTooltip	=	$(".selector").igTreeGridUpdating("option",	"addChildTooltip");

				//Set
				$(".selector").igTreeGridUpdating("option",	"addChildTooltip",	"Add	a	row	here");
			 

Specifies the label for the button starting edit mode for row adding. If not set, $.ig.GridUpdating.locale.addRowLabel is used.

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

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

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

Specifies the title for the button starting edit mode for row adding. If not set, $.ig.GridUpdating.locale.addRowTooltip is used.

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

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

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

Specifies the label for the Cancel editing button (only applicable when the showDoneCancelButtons option is enabled). If not set, $.ig.GridUpdating.locale.cancelLabel is used.

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

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

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

Specifies the title for the Cancel editing button (only applicable when the showDoneCancelButtons option is enabled). If not set, $.ig.GridUpdating.locale.cancelTooltip is used.

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

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

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

A list of custom column options that specify editing and validation settings for a specific column.

 
				//Initialize
				$("#grid").igTreeGrid({
					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").igTreeGridUpdating("option", "columnSettings");
			 

• columnKey

  Type:

  string

  Default:

  null

  Identifies the grid column by key.

  Code Sample

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

• defaultValue

  Type:

  object

  Default:

  null

  Specifies the default value for the column when adding new rows. When in edit mode for adding a row the value will be pre-filled in the column's editor (if the column is not read-only). The value should be of the type specified for the column in the grid's columns collection.

  Code Sample

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

• editorOptions

  Type:

  object

  Default:

  null

  Specifies options to initialize the corresponding editor with.

  Code Sample

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

• editorProvider

  Type:

  object

  Default:

  null

  Specifies а custom editor provider instance. More information about editor providers can be found here and here.
  It should either extend $.ig.EditorProvider or have definitions for the following methods:
  $.ig.EditorProvider = $.ig.EditorProvider|| $.ig.EditorProvider.extend({
  createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {},
  attachErrorEvents: function (errorShowing, errorShown, errorHidden) {},
  getEditor: function () {},
  refreshValue: function () {},
  getValue: function () {},
  setValue: function (val) {},
  setSize: function (width, height) {},
  setFocus: function () {},
  removeFromParent: function () {},
  destroy: function () {},
  validator: function () {},
  validate: function (noLabel) {},
  isValid: function () {}
  });.

  Code Sample

   
  						// This editor provider demonstrates how to wrap HTML 5 number INPUT into editor provider for the igTreeGridUpdating
  						$.ig.EditorProviderNumber = $.ig.EditorProviderNumber || $.ig.EditorProvider.extend({
  							// initialize the editor
  							createEditor: function (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").igTreeGrid({
  							features: [
  								{
  									name: "Updating",
  									columnSettings: [
  										{
  											columnKey : "SafetyStockLevel",
  											editorProvider: new $.ig.EditorProviderNumber()
  										}
  									]
  								}
  							]
  						});
  
  						//Get
  						var columnSettings = $("#grid").igTreeGridUpdating("option", "columnSettings")[0].editorProvider;
  					 

• editorType

  Type:

  enumeration

  Default:

  null

  Specifies the type of editor to use for the column.

  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
  • An igCombo editor is created. Both the JS and CSS files used by ui.igCombo should be available.
  • rating
  • Type:string
  • An igRating editor is created. Both the JS and CSS files used by ui.igRating should be available.

  Code Sample

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

• readOnly

  Type:

  bool

  Default:

  null

  Specifies if the column is read-only. In 'cell' and 'row' editMode no editor will be created for read-only columns. In 'dialog' mode enabling showReadonlyEditors will display disabled editors for such columns.

  Code Sample

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

• required

  Type:

  bool

  Default:

  null

  Specifies if the end-user will be allowed to leave the editor's value empty during edit mode or not.

  Code Sample

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

• validation

  Type:

  bool

  Default:

  null

  Specifies if the column's value should be validated or not. The validation is done based on the rules of the corresponding editor.

  Code Sample

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

Specifies the label for the delete button. If not set, $.ig.GridUpdating.locale.deleteRowLabel is used.

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

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

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

Specifies the title for the delete button. If not set, $.ig.GridUpdating.locale.deleteRowTooltip is used.

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

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

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

Name of the dialog widget to be used. It should inherit from $.ui.igGridModalDialog. For more information on how to utilize this property, please refer to the Extending igGrid Modal Dialog topic.

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

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

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

Specifies the label for the Done editing button (only applicable when the showDoneCancelButtons option is enabled). If not set, $.ig.GridUpdating.locale.doneLabel is used.

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

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

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

Specifies the title for the Done editing button (only applicable when the showDoneCancelButtons option is enabled). If not set, $.ig.GridUpdating.locale.doneTooltip is used.

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

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

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

Specifies the edit mode.

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

Specifies whether to enable or disable adding children to rows.

 
				//Initialize
				$(".selector").igTreeGrid({
					features:	[
						{
							name:	"Updating",
							enableAddChild:	true
						}
					]
				});

				//Get
				var	addChild	=	$(".selector").igTreeGridUpdating("option",	"enableAddChild");

				//Set
				$(".selector").igTreeGridUpdating("option",	"enableAddChild",	false);
			 

Specifies if adding rows through the UI is enabled. When enabled an additional row is rendered at the bottom of the grid's header that works as a button. When the end-user clicks on it edit mode is initiated either through a dialog (when editMode is 'dialog') or mimicking the look and feel of 'row' editMode (when editMode is 'row' or 'cell').

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

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

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

Specifies if an exception should be thrown when the grid's data view changes while there are pending transactions in the data source. The data view changes when the data source performs a sorting, filtering, groupby or paging operation and the exception thrown will prevent the operation from succeeding. All pending transactions must be committed before a data view operation is able to complete. Committing transactions can be done manually through the grid's commit function or automatically by setting autoCommit to 'true'.

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

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

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

Specifies if deleting rows through the UI is enabled.

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

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

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

Enables excel navigation style. When turned on, the arrow keys can be used for changing the currently edited cell similar to how Tab and Enter behave. When disabled, the arrow keys control the cursor inside editors.

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

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

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

Determines if pressing Enter to navigate away from the currently edited cell should move the focus horizontally or vertically (default).

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

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

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

Enables/disables feature inheritance for the child layouts in igHierarchicalGrid.

A list of options controlling the rendering behavior of the row edit dialog. If editMode 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").igTreeGrid({
						features: [
							{
								name: "Updating",
			rowEditDialogOptions: {
									width: "530px",
									height: "350px",
									dialogTemplateSelector: "#dialogTemplate",
									editorsTemplateSelector: "#editorsTemplate",
									showReadonlyEditors: false,
								}
							}
						]
					});
				</script>
				//Get
				var roweditDialogOptions = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions");

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

• captionLabel

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

• containment

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

• dialogTemplate

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

• dialogTemplateSelector

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

• editorsColumnWidth

  Type:

  enumeration

  Default:

  null

  Controls the width of the column containing the editors in the default row edit dialog.

  Members

  • string
  • Type:string
  • The width of the column in pixels (100px) or percents (20%).
  • number
  • Type:number
  • The width of the column as a number (100) in pixels.
  • null
  • Type:object
  • The width of the column will be left empty for the browser to size automatically.

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

• editorsTemplate

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

• editorsTemplateSelector

  Type:

  string

  Default:

  null

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

• height

  Type:

  enumeration

  Default:

  350px

  Controls the default row edit dialog height.

  Members

  • string
  • Type:string
  • The dialog window height in pixels (350px).
  • number
  • Type: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").igTreeGrid({
  						features: [
  							{
  								name: "Updating",
  								rowEditDialogOptions: {
  									height: "350px",
  									dialogTemplateSelector: "#dialogTemplate",
  									editorsTemplateSelector: "#editorsTemplate"
  								}
  							}
  						]
  					});
  					//Get
  					var height = $("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").height;
  					//Set
  					$("#grid").igTreeGridUpdating("option", "rowEditDialogOptions").height = "350px";
  				 

• namesColumnWidth

  Type:

  enumeration

  Default:

  150px

  Controls the width of the column containing the column names in the default row edit dialog.

  Members

  • string
  • Type:string
  • The width of the column in pixels (100px) or percents (20%).
  • number
  • Type:number
  • The width of the column as a number (100) in pixels.
  • null
  • Type:object
  • The width of the column will be left empty for the browser to size automatically.

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

• showDoneCancelButtons

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

• showEditorsForHiddenColumns

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

• showReadonlyEditors

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

• width

  Type:

  enumeration

  Default:

  415px

  Controls the default row edit dialog width.

  Members

  • string
  • Type:string
  • The dialog window width in pixels (400px).
  • number
  • Type:number
  • The dialog window width as a number (400).

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

Sets a custom function to be called when the AJAX request to the URL specified by the updateUrl property fails. The function will be called with arguments representing the data returned by the server.

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

Sets a custom function to be called when the AJAX request to the URL specified by the updateUrl property succeeds. The function will be called with arguments representing the data returned by the server.

 
				//Initialize
				$("#grid").igTreeGrid({
					features: [
						{
							name: "Updating",
							saveChangesSuccessHandler : function (data) {
								$("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);
							}
						}
					]
				});
				//Get
				var successHandler = $("#grid").igTreeGridUpdating("option", "saveChangesSuccessHandler");
				//Set
				$("#grid").igTreeGridUpdating("option", "saveChangesSuccessHandler", function(data) {
					$("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);
				});
			 

Determines if the Done and Cancel buttons will be available as means to end edit mode for editMode 'row' and when adding a new row.

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

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

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

Specifies how end-users are able to start edit mode. Possible values: "click", "dblclick", "F2", "enter" and their combinations separated by coma or in array. The keyboard triggers have effect only if the grid cells can receive focus (the grid's tabIndex property should not have a negative value) or Selection is enabled. If "dblclick" is included, then "click" has no effect.

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

On touch-enabled devices specifies the swipe distance for the delete button to appear.

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

Specifies if the value of each editable column in the grid should be validated. The validation is done based on the rules of their corresponding editors.

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

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

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

Controls if navigation will wrap around the grid. The feature will never wrap around virtual grids.

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

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

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