Ignite UI API Reference

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: {
							button: "dropdown",
							listItems: names,
							readOnly: true,
							dropDownOnReadOnly: true
						},
                    required: true,
                    validation: true
                }
            ]
    	}
    ]
});
            
//Get
var columnSettings = $("#grid").igGridUpdating("option", "columnSettings");
            
//Set
$("#grid").igGridUpdating("option", "columnSettings", 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: {
  							button: "dropdown",
  							listItems: names,
  							readOnly: true,
  							dropDownOnReadOnly: 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. It should extend $.ig.EditorProviderDefault or it should have definitions of all its methods.

  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 (updating, key, columnSetting, tabIndex) {
  		// updating - reference to igGridUpdating feature
  		// key - the key of the colomn. There is only one editor instance per column
  		// columnSetting - settings set by the user in iGridUpdating.columnSettings[<index>]
  		// tabIndex - the tabIndex of the editor
  		var element = $('<input type="number" />');
  
  		this.editor = element;
  		
  		element.on("keydown", function() {
  			// notify igGridUpdating that the value is changed
  			updating._notifyChanged();
  		});
  		return element;
  	},
  	// get editor value
  	getValue: function () {
  		return parseFloat(this.editor.val());
  	},
  	// set editor value
  	setValue: function (val) {
  		return this.editor.val(val || 0);
  	},
  	// size the editor into the TD cell
  	setSize: function (width, height) {
  	  this.editor.css({
  			width: width - 2,
  			height: height - 2,
  			borderWidth: "1px",
  			backgroundPositionY: "9px"
  	  });
  	},
  	// focus the editor
  	setFocus: function () {
  		this.editor[0].select();
  	},
  	// validate the editor
  	validator: function () {
  		// no validator
  		return null;
  	},
  	// destroy the editor
  	destroy: function () {
  		this.editor.remove();
  	}
  });
  
  //Initialize
  $("#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. Note: the css and js files used by ui.igEditor should be available.

  Members

  • text
  • Type:string
  • the igEditor with type text is created.
  • 0
  • Type:number
  • the igEditor with type text is created (same as 'text').
  • mask
  • Type:string
  • the igEditor with type mask is created.
  • 1
  • Type:number
  • the igEditor with type mask is created (same as 'mask').
  • date
  • Type:string
  • the igEditor with type date editor is created.
  • 2
  • Type:number
  • the igEditor with type date editor is created (same as 'date').
  • datepicker
  • Type:string
  • the igEditor with type datepicker is created. Note: the css and js files used by jquery.ui.datepicker should be available.
  • 3
  • Type:number
  • the igEditor with type datepicker is created (same as 'datepicker').
  • numeric
  • Type:string
  • the igEditor with type numeric is created.
  • 4
  • Type:number
  • the igEditor with type numeric is created (same as 'numeric').
  • currency
  • Type:string
  • the igEditor with type currency is created.
  • 5
  • Type:number
  • the igEditor with type currency is created (same as 'currency').
  • percent
  • Type:string
  • the igEditor with type percent is created.
  • 6
  • Type:number
  • the igEditor with type percent is created (same as 'percent').
  • 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 gets edit mode.

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

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

Sets gets text for caption of the rowEditDialog. If that is not set, then $.ig.GridUpdating.locale.rowEditDialogCaptionLabel is used.

Controls containment behavior.
owner The row edit dialog will be draggable only in the grid area
window The row edit dialog will be draggable in the whole window area.

  
       //Initialize 
       $("#grid").igGrid({     
          features: [         
            {             
              name: "Updating",  
              editMode:"rowedittemplate",
              rowEditDialogContainment: "owner"        
            }     
          ] });  
          
          //Get 
          var containment = $("#grid").igGridUpdating("option", "rowEditDialogContainment");               
          //Set 
          $("#grid").igGridUpdating("option", "rowEditDialogContainment", "window");
      

the height of the row edit dialog content .

 
       //Initialize
       $("#grid").igGrid({
          features: [
            {
              name: "Updating",
              editMode:"rowedittemplate",
              rowEditDialogContentHeight: "200px"
            }
          ] });

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

Width of the row edit dialog fields
number The width as a number (0).

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

default row edit dialog height.

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

Width of the Ok and Cancel buttons in the row edit dialogs .

 
      //Initialize 
      $("#grid").igGrid({     
          features: [         
            {             
              name: "Updating",  
              editMode:"rowedittemplate",
              rowEditDialogOkCancelButtonWidth: 100        
            }     
          ] });  
          
          //Get 
          var OkCancelWidth = $("#grid").igGridUpdating("option", "rowEditDialogOkCancelButtonWidth");     
          
          //Set 
          $("#grid").igGridUpdating("option", "rowEditDialogOkCancelButtonWidth", "100px");
      
      

Custom template for rows in row edit dialog
The default template is "<tr><td>${headerText}</td><td data-key='${dataKey}'><input /></td></tr>".

 
      //Initialize 
      $("#grid").igGrid({     
          features: [         
            {             
              name: "Updating",  
              editMode:"rowedittemplate",
              rowEditDialogRowTemplate: "<tr><td>${headerText}</td><td data-key='${dataKey}'> {{if ${headerText} =='On Site'}} <input type='checkbox' />{{else}}<input />{{/if}}</td></tr>"        
            }     
          ] });  
          
          //Get 
          var retTemplate = $("#grid").igGridUpdating("option", "rowEditDialogRowTemplate");     
          
          //Set 
          $("#grid").igGridUpdating("option", "rowEditDialogRowTemplate", "<tr><td>${headerText}</td><td data-key='${dataKey}'> {{if ${headerText} =='On Site'}} <input type='checkbox' />{{else}}<input />{{/if}}</td></tr>");
      

ID to x-jquery-tmpl template. If both rowEditDialogRowTemplate and rowEditDialogRowTemplateID are
specified, then rowEditDialogRowTemplateID will be used.

 
      <script id="rowEditDialogRowTemplate1" type="text/x-jquery-tmpl">    
        <tr class="tableBackGround">                
            <td> ${headerText}
            </td>
            <td data-key='${dataKey}'>
                <input /> 
            </td>
        </tr>
     </script>
    
      //Initialize 
      $("#grid").igGrid({     
          features: [         
            {             
              name: "Updating",  
              editMode:"rowedittemplate",
              rowEditDialogRowTemplateID: "rowEditDialogRowTemplate1"        
            }     
          ] });  
          
          //Get 
          var retTemplateID = $("#grid").igGridUpdating("option", "rowEditDialogRowTemplateID");     
          
          //Set 
          $("#grid").igGridUpdating("option", "rowEditDialogRowTemplateID", "rowEditDialogRowTemplate1");
      

default row edit dialog width.

       //Initialize 
      $("#grid").igGrid({     
          features: [         
            {             
              name: "Updating",  
              editMode:"rowedittemplate",
              rowEditDialogWidth: 400        
            }     
          ] });  
          
          //Get 
          var width = $("#grid").igGridUpdating("option", "rowEditDialogWidth");     
          
          //Set 
          $("#grid").igGridUpdating("option", "rowEditDialogWidth", "400px");
      

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

Used in row edit template when editing is disabled for a particular column
Value true: disabled columns are rendered as disabled
Value false: disabled columns are not rendered in the editors.

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