Ignite UI API Reference
ui.igGridUpdating
Both the igGrid and igHierarchicalGrid controls feature data updating in the grid. The updating features of the grid provide a wide array of adding and editing values of the underling set of data bound to the grid. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.
The following code snippet demonstrates how to initialize the igGrid control.
Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.Code Sample
<!doctype html> <html> <head> <!-- Infragistics Combined CSS --> <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" /> <!-- jQuery Core --> <script src="js/jquery.js" type="text/javascript"></script> <!-- jQuery UI --> <script src="js/jquery-ui.js" type="text/javascript"></script> <!-- Infragistics Combined Scripts --> <script src="js/infragistics.core.js" type="text/javascript"></script> <script src="js/infragistics.lob.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var ds = [ { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" }, { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" }, { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" }, { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" }, { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" }, { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" }, { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" }, { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" }, { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" } ]; $("#gridUpdating").igGrid({ primaryKey: "ProductID", columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number" }, { headerText: "Product Name", key: "Name", dataType: "string" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string" } ], dataSource: ds, features: [ { name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, columnSettings: [ { columnKey: "ProductID", editorOptions: { type: "numeric", disabled: true} }, ] }] }); }); </script> </head> <body> <table id="gridUpdating"></table> </body> </html>
Related Samples
Related Topics
Dependencies
Inherits
-
addRowLabel
- Type:
- string
- Default:
- null
Sets gets text for add-new-row button. If that is not set, then $.ig.GridUpdating.locale.addRowLabel is used.
Code Sample
//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");
-
addRowTooltip
- Type:
- string
- Default:
- null
Sets gets text for title of add-new-row button. If that is not set, then $.ig.GridUpdating.locale.addRowTooltip is used.
Code Sample
//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");
-
cancelLabel
- Type:
- string
- Default:
- null
Sets gets text for Cancel editing button. If that is not set, then $.ig.GridUpdating.locale.cancelLabel is used.
Code Sample
//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");
-
cancelTooltip
- Type:
- string
- Default:
- null
Sets gets text for title of Cancel editing button. If that is not set, then $.ig.GridUpdating.locale.cancelTooltip is used.
Code Sample
//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");
-
columnSettings
- Type:
- array
- Default:
- []
- Elements Type:
- object
Sets gets array of settings for each column.
Code Sample
//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);
-
deleteRowLabel
- Type:
- string
- Default:
- null
Sets gets text for Delete row button. If that is not set, then $.ig.GridUpdating.locale.deleteRowLabel is used.
Code Sample
//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");
-
deleteRowTooltip
- Type:
- string
- Default:
- null
Sets gets text for title of Delete row button. If that is not set, then $.ig.GridUpdating.locale.deleteRowTooltip is used.
Code Sample
//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");
-
doneLabel
- Type:
- string
- Default:
- null
Sets gets text for Done editing button. If that is not set, then $.ig.GridUpdating.locale.doneLabel is used.
Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", doneLabel: "Fine" } ] }); //Get var label = $("#grid").igGridUpdating("option", "doneLabel"); //Set $("#grid").igGridUpdating("option", "doneLabel", "Fine");
-
doneTooltip
- Type:
- string
- Default:
- null
Sets gets text for title of Done editing button. If that is not set, then $.ig.GridUpdating.locale.doneTooltip is used.
Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", doneTooltip: "Fine" } ] }); //Get var label = $("#grid").igGridUpdating("option", "doneTooltip"); //Set $("#grid").igGridUpdating("option", "doneTooltip", "Fine");
-
editMode
- Type:
- enumeration
- Default:
- row
Sets gets edit mode.
Members
- row
- Type:string
- editors in all cells in a row are displayed. Editor under clicked cell should get input focus. Optional Done/Cancel buttons can be displayed.
- cell
- Type:string
- editor only for clicked cell is displayed. The Done/Cancel buttons are not supported.
- rowedittemplate
- Type:string
- editor for all cells will be rendered as popup dialog.
- none
- Type:string
- editing of grid-cells is disabled.
- null
- Type:object
- editing of grid-cells is disabled.
Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", editMode: "rowedittemplate" } ] }); //Get var mode = $("#grid").igGridUpdating("option", "editMode"); //Set $("#grid").igGridUpdating("option", "editMode", "rowedittemplate");
-
enableAddRow
- Type:
- bool
- Default:
- true
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.Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", enableAddRow: false } ] }); //Get var addEnabled = $("#grid").igGridUpdating("option", "enableAddRow"); //Set $("#grid").igGridUpdating("option", "enableAddRow", false);
-
enableDataDirtyException
- Type:
- bool
- Default:
- true
Sets gets ability to enable or disable exception, which is raised when grid has pending transaction and may fail to render data correctly.
Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", enableDataDirtyException: false } ] }); //Get var isEnabled = $("#grid").igGridUpdating("option", "enableDataDirtyException"); //Set $("#grid").igGridUpdating("option", "enableDataDirtyException", false);
-
enableDeleteRow
- Type:
- bool
- Default:
- true
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.Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", enableDeleteRow: false } ] }); //Get var isEnabled = $("#grid").igGridUpdating("option", "enableDeleteRow"); //Set $("#grid").igGridUpdating("option", "enableDeleteRow", false);
-
excelNavigationMode
- Type:
- bool
- Default:
- 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.Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", excelNavigationMode: true } ] }); //Get var isExcelNavMode = $("#grid").igGridUpdating("option", "excelNavigationMode"); //Set $("#grid").igGridUpdating("option", "excelNavigationMode", true);
-
horizontalMoveOnEnter
- Type:
- bool
- Default:
- false
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.Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", horizontalMoveOnEnter: true } ] }); //Get var moveOnEnter = $("#grid").igGridUpdating("option", "horizontalMoveOnEnter"); //Set $("#grid").igGridUpdating("option", "horizontalMoveOnEnter", true);
-
rowEditDialogCaptionLabel
- Type:
- string
- Default:
- null
Sets gets text for caption of the rowEditDialog. If that is not set, then $.ig.GridUpdating.locale.rowEditDialogCaptionLabel is used.
-
rowEditDialogContainment
- Type:
- string
- Default:
- owner
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.Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogContainment: "owner" } ] }); //Get var containment = $("#grid").igGridUpdating("option", "rowEditDialogContainment"); //Set $("#grid").igGridUpdating("option", "rowEditDialogContainment", "window");
-
rowEditDialogContentHeight
- Type:
- enumeration
- Default:
- 150
the height of the row edit dialog content .
Members
- string
- The dialog content height in pixels (150px).
- number
- The dialog content height as a number (150).
Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogContentHeight: "200px" } ] }); //Get var rowEditDialogContentHeight = $("#grid").igGridUpdating("option", "rowEditDialogContentHeight");
-
rowEditDialogFieldWidth
- Type:
- number
- Default:
- 140
Width of the row edit dialog fields
number The width as a number (0).Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogFieldWidth: 150 } ] }); //Get var width = $("#grid").igGridUpdating("option", "rowEditDialogFieldWidth"); //Set $("#grid").igGridUpdating("option", "rowEditDialogFieldWidth", 150);
-
rowEditDialogHeight
- Type:
- enumeration
- Default:
- 350
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
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogHeight: 200 } ] }); //Get var height = $("#grid").igGridUpdating("option", "rowEditDialogHeight"); //Set $("#grid").igGridUpdating("option", "rowEditDialogHeight", "200px");
-
rowEditDialogOkCancelButtonWidth
- Type:
- enumeration
- Default:
- 120
Width of the Ok and Cancel buttons in the row edit dialogs .
Members
- string
- The advanced row edit dialog Ok and Cancel buttons width in pixels (100px).
- number
- The advanced row edit dialog Ok and Cancel buttons width as a number (100).
Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogOkCancelButtonWidth: 100 } ] }); //Get var OkCancelWidth = $("#grid").igGridUpdating("option", "rowEditDialogOkCancelButtonWidth"); //Set $("#grid").igGridUpdating("option", "rowEditDialogOkCancelButtonWidth", "100px");
-
rowEditDialogRowTemplate
- Type:
- string
- Default:
- null
Custom template for rows in row edit dialog
The default template is "<tr><td>${headerText}</td><td data-key='${dataKey}'><input /></td></tr>".Code Sample
//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>");
-
rowEditDialogRowTemplateID
- Type:
- string
- Default:
- null
ID to x-jquery-tmpl template. If both rowEditDialogRowTemplate and rowEditDialogRowTemplateID are
specified, then rowEditDialogRowTemplateID will be used.Code Sample
<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");
-
rowEditDialogWidth
- Type:
- enumeration
- Default:
- 370
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
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", editMode:"rowedittemplate", rowEditDialogWidth: 400 } ] }); //Get var width = $("#grid").igGridUpdating("option", "rowEditDialogWidth"); //Set $("#grid").igGridUpdating("option", "rowEditDialogWidth", "400px");
-
saveChangesErrorHandler
- Type:
- enumeration
- Default:
- null
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.
Code Sample
//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); });
-
saveChangesSuccessHandler
- Type:
- enumeration
- Default:
- null
Specifies a custom function to be called when AJAX request to the updateUrl option succeeds. Receives as argument the data returned by the server.
Code Sample
//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); });
-
showDoneCancelButtons
- Type:
- bool
- Default:
- true
Sets gets visibility of the end-edit pop-up dialog with Done/Cancel buttons.
Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", showDoneCancelButtons: false } ] }); //Get var showButton = $("#grid").igGridUpdating("option", "showDoneCancelButtons"); //Set $("#grid").igGridUpdating("option", "showDoneCancelButtons", false);
-
showReadonlyEditors
- Type:
- bool
- Default:
- true
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.Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", editMode :"rowedittemplate", showReadonlyEditors: false } ] }); //Get var showReadOnly = $("#grid").igGridUpdating("option", "showReadonlyEditors"); //Set $("#grid").igGridUpdating("option", "showReadonlyEditors", false);
-
startEditTriggers
- Type:
- string
- Default:
- click,f2,enter
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.Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", startEditTriggers: "dblclick,F2" } ] }); //Get var triggers = $("#grid").igGridUpdating("option", "startEditTriggers"); //Set $("#grid").igGridUpdating("option", "startEditTriggers", "dblclick,F2");
-
swipeDistance
- Type:
- enumeration
- Default:
- 100px
The swipe distance when on touch to trigger row delete button to appear.
Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", swipeDistance: "200px" } ] }); //Get var triggers = $("#grid").igGridUpdating("option", "swipeDistance"); //Set $("#grid").igGridUpdating("option", "swipeDistance", "200px");
-
validation
- Type:
- bool
- Default:
- false
Sets gets option to enable validation for all columns.
Code Sample
//Initialize $("#grid").igGrid({ features: [ { name: "Updating", validation: true } ] }); //Get var isValidating = $("#grid").igGridUpdating("option", "validation"); //Set $("#grid").igGridUpdating("option", "validation", true);
For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.
-
dataDirty
- Cancellable:
- true
Event which is raised when autoCommit of grid is not enabled and grid has pending transaction which may fail to be correctly rendered.
Application should process that event and it may trigger commit of grid.
Return false in order to prevent exception.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingdatadirty", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", dataDirty: function(evt, ui){ ... } } ] });
-
editCellEnded
- Cancellable:
- false
Event which is raised after end cell editing.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.rowID to get key or index of row.
Use ui.columnIndex to get index of column.
Use ui.columnKey to get key of column.
Use ui.editor to get reference to igEditor.
Use ui.value to get value of cell.
Use ui.oldValue to get old value.
Use ui.update to check if cell was modified and data source will be updated.
Use ui.rowAdding to check if that event is raised while new-row-adding.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingeditcellended", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // to get key or index of row ui.rowID; // get index of column ui.columnIndex; // get key of column ui.columnKey; // get reference to igEditor ui.editor; // get value of cell ui.value; // get old value of cell ui.oldValue; // check if cell was modified and data source will be updated ui.update; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editCellEnded: function(evt, ui){ ... } } ] });
-
editCellEnding
- Cancellable:
- true
Event which is raised before end cell editing.
Return false in order to cancel update of data source.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.rowID to get key or index of row.
Use ui.columnIndex to get index of column.
Use ui.columnKey to get key of column.
Use ui.keepEditing=true in order to keep editing. It has effect only when evt.originalEvent is defined and only when editMode is "cell".
Use ui.editor to get reference to igEditor.
Use ui.value to get value of cell/editor. That value can be modified and it will be used to update data source.
Use ui.oldValue to get old value.
Use ui.update to check if value was modified and data source will be updated.
Use ui.rowAdding to check if that event is raised while new-row-adding.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingeditcellending", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // to get key or index of row ui.rowID; // get index of column ui.columnIndex; // get key of column ui.columnKey; // get reference to igEditor ui.editor; // get value of cell ui.value; // get old value of cell ui.oldValue; // check if cell was modified and data source will be updated ui.update; // check if that event is raised while new-row-adding ui.rowAdding; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editCellEnding: function(evt, ui){ ... } } ] });
-
editCellStarted
- Cancellable:
- false
Event which is raised after start cell editing.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.rowID to get key or index of row.
Use ui.columnIndex to get index of column.
Use ui.columnKey to get key of column.
Use ui.editor to get reference to igEditor.
Use ui.value to get value of editor.
Use ui.rowAdding to check if that event is raised while new-row-adding.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingeditcellstarted", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // to get key or index of row ui.rowID; // get index of column ui.columnIndex; // get key of column ui.columnKey; // get reference to igEditor ui.editor; // get value of cell ui.value; // check if that event is raised while new-row-adding ui.rowAdding; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editCellStarted: function(evt, ui){ ... } } ] });
-
editCellStarting
- Cancellable:
- true
Event which is raised before start cell editing.
Return false in order to cancel start editing and do not show editors.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.rowID to get key or index of row.
Use ui.columnIndex to get index of column.
Use ui.columnKey to get key of column.
Use ui.editor to get reference to igEditor.
Use ui.value to get or set value of editor.
Use ui.rowAdding to check if that event is raised while new-row-adding.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingeditcellstarting", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // to get key or index of row ui.rowID; // get index of column ui.columnIndex; // get key of column ui.columnKey; // get reference to igEditor ui.editor; // get value of cell ui.value; // check if that event is raised while new-row-adding ui.rowAdding; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editCellStarting: function(evt, ui){ ... } } ] });
-
editRowEnded
- Cancellable:
- false
Event which is raised after end row editing.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.rowID to get key or index of row.
Use ui.update to check if value of any cell was modified and data source will be updated.
Use ui.rowAdding to check if that event is raised while new-row-adding.
Use ui.values[key] to get value of cell in column with the key. That is available only when ui.update is true.
Use ui.oldValues[key] to get old value of cell in column with the key. That is available only when ui.update is true.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingeditrowended", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // to get key or index of row ui.rowID; // check if cell was modified and data source will be updated ui.update; // get value of cell in column with the key ui.values[key]; // to get old value of cell in column with the key ui.oldValues[key]; // check if that event is raised while new-row-adding ui.rowAdding; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editRowEnded: function(evt, ui){ ... } } ] });
-
editRowEnding
- Cancellable:
- true
Event which is raised before end row editing.
Return false in order to cancel update of data source.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.rowID to get key or index of row.
Use ui.keepEditing=true in order to keep editing. It has effect only when evt.originalEvent is defined.
Use ui.update to check if value of any cell was modified and data source will be updated.
Use ui.rowAdding to check if that event is raised while new-row-adding.
Use ui.values[key] to get value of cell in column with the key. That is available only when ui.update is true.
Use ui.oldValues[key] to get old value of cell in column with the key. That is available only when ui.update is true.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingeditrowending", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // to get key or index of row ui.rowID; // in order to keep editing ui.keepEditing = true; // check if cell was modified and data source will be updated ui.update; // get value of cell in column with the key ui.values[key]; // to get old value of cell in column with the key ui.oldValues[key]; // check if that event is raised while new-row-adding ui.rowAdding; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editRowEnding: function(evt, ui){ ... } } ] });
-
editRowStarted
- Cancellable:
- false
Event which is raised after start row editing.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.rowID to get key or index of row.
Use ui.rowAdding to check if that event is raised while new-row-adding.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingeditrowstarted", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // to get key or index of row ui.rowID; // check if that event is raised while new-row-adding ui.rowAdding; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editRowStarted: function(evt, ui){ ... } } ] });
-
editRowStarting
- Cancellable:
- true
Event which is raised before start row editing.
Return false in order to cancel editing and do not show editors in row.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.rowID to get key or index of row.
Use ui.rowAdding to check if that event is raised while new-row-adding.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingeditrowstarting", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // to get key or index of row ui.rowID; // check if that event is raised while new-row-adding ui.rowAdding; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editRowStarting: function(evt, ui){ ... } } ] });
-
generatePrimaryKeyValue
- Cancellable:
- false
Event which is raised before adding new row to get value of cell for primaryKey column.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.value to set unique record-key-identifier for new row. It is prefilled with suggested value (defaultValue of column or number of rows in data source).Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatinggenerateprimarykeyvalue", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // set unique record-key-identifier for new row ui.value; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", generatePrimaryKeyValue: function(evt, ui){ ... } } ] });
-
rowAdded
- Cancellable:
- false
Event which is raised after adding new row.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.values[key] to get new value of cell in column with the key.
Use ui.oldValues[key] to get default value (before editing) of cell in column with the key.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingrowadded", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get new value of cell in column with the key ui.values[key]; // get default value (before editing) of cell in column with the key ui.oldValues[key]; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", rowAdded: function(evt, ui){ ... } } ] });
-
rowAdding
- Cancellable:
- true
Event which is raised before adding new row.
Return false in order to cancel adding new row to data source.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.values[key] to get new value of cell in column with the key.
Use ui.oldValues[key] to get default value (before editing) of cell in column with the key.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingrowadding", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get new value of cell in column with the key ui.values[key]; // get default value (before editing) of cell in column with the key ui.oldValues[key]; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", rowAdding: function(evt, ui){ ... } } ] });
-
rowDeleted
- Cancellable:
- false
Event which is raised after row deleting.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.element to get reference to jquery object which represents TR of row to delete.
Use ui.rowID to get key or index of row to delete.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingrowdeleted", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get reference to jquery object which represents TR of row to delete ui.element; // get key or index of row to delete ui.rowID; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", rowDeleted: function(evt, ui){ ... } } ] });
-
rowDeleting
- Cancellable:
- true
Event which is raised before row deleting.
Return false in order to cancel.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.owner.grid to get reference to igGrid.
Use ui.element to get reference to jquery object which represents TR of row to delete.
Use ui.rowID to get key or index of row to delete.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingrowdeleting", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get reference to jquery object which represents TR of row to delete ui.element; // get key or index of row to delete ui.rowID; }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", rowDeleting: function(evt, ui){ ... } } ] });
-
rowEditDialogClosed
- Cancellable:
- false
Event fired after the row edit dialog is closed.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.dialogElement to get reference to row edit dialog DOM element.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingroweditdialogclosed", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get reference to the row edit dialog DOM element ui.dialogElement; // get reference to the current data row ui.dialogElement.data('tr'); }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editMode : "rowedittemplate", rowEditDialogClosed: function(evt, ui){ ... } } ] });
-
rowEditDialogClosing
- Cancellable:
- false
Event fired before the row edit dialog is closed.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.dialogElement to get reference to row edit dialog DOM element.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingroweditdialogclosing", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get reference to the row edit dialog DOM element ui.dialogElement; // get reference to the current data row ui.dialogElement.data('tr'); }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editMode : "rowedittemplate", rowEditDialogClosing: function(evt, ui){ ... } } ] });
-
rowEditDialogContentsRendered
- Cancellable:
- false
Event fired after the contents of the row edit dialog are rendered.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.dialogElement to get reference to row edit dialog DOM element.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingroweditdialogcontentsrendered", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get reference to the row edit dialog DOM element ui.dialogElement; // get reference to the current data row ui.dialogElement.data('tr'); }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editMode : "rowedittemplate", rowEditDialogContentsRendered: function(evt, ui){ ... } } ] });
-
rowEditDialogContentsRendering
- Cancellable:
- false
Event fired before the contents of the row edit dialog are rendered.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.dialogElement to get reference to row edit dialog DOM element.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingroweditdialogcontentsrendering", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get reference to the row edit dialog DOM element ui.dialogElement; // get reference to the current data row ui.dialogElement.data('tr'); }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editMode : "rowedittemplate", rowEditDialogContentsRendering: function(evt, ui){ ... } } ] });
-
rowEditDialogOpened
- Cancellable:
- false
Event fired after the row edit dialog is opened.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.dialogElement to get reference to row edit dialog DOM element.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingroweditdialogopened", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get reference to the row edit dialog DOM element ui.dialogElement; // get reference to the current data row ui.dialogElement.data('tr'); }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editMode : "rowedittemplate", rowEditDialogOpened: function(evt, ui){ ... } } ] });
-
rowEditDialogOpening
- Cancellable:
- false
Event fired before the row edit dialog is opened.
Function takes arguments evt and ui.
Use ui.owner to get reference to igGridUpdating.
Use ui.dialogElement to get reference to row edit dialog DOM element.Code Sample
//Bind after initialization $(document).delegate(".selector", "iggridupdatingroweditdialogopening", function (evt, ui) { //return the triggered event evt; // get reference to igGridUpdating widget ui.owner; // get reference to the row edit dialog DOM element ui.dialogElement; // get reference to the current data row ui.dialogElement.data('tr'); }); //Initialize $(".selector").igGrid({ features : [ { name : "Updating", editMode : "rowedittemplate", rowEditDialogOpening: function(evt, ui){ ... } } ] });
-
addRow
- .igGridUpdating( "addRow", values:object );
Adds a new row to the grid. It also creates a transaction and updates the UI. Functionality depends on autoCommit option of igGrid.
- values
- Type:object
- pairs of values in the format { column1Key: value1, column2Key: value2, ... }.
Code Sample
$("#grid").igGridUpdating("addRow", {ID: 1, Name: "John"});
-
deleteRow
- .igGridUpdating( "deleteRow", rowId:object, [tr:domelement] );
Deletes a row from the grid. It also creates a transaction and updates the UI. Functionality depends on autoCommit option of igGrid.
- rowId
- Type:object
- value of the primary key column of the igGrid.
- tr
- Type:domelement
- Optional
- reference to the TR element which represents row.
Code Sample
$("#grid").igGridUpdating("deleteRow", 5);
-
destroy
- .igGridUpdating( "destroy" );
- Return Type:
- object
- Return Type Description:
- Returns reference to this igGridUpdating.
Destroys igGridUpdating.
Code Sample
$("#grid").igGridUpdating("destroy");
-
editorForCell
- .igGridUpdating( "editorForCell", td:jquery, [add:bool] );
- Return Type:
- object
- Return Type Description:
- Returns reference to igEditor or null.
Find or create editor which is used for a cell in igGrid.
- td
- Type:jquery
- Reference to jquery TD object in igGrid.
- add
- Type:bool
- Optional
- Request to create editor. That parameter was designed for internal use and first td parameter must contain valid cell in grid.
Code Sample
var editor = $("#grid").igGridUpdating("editorForCell", $(gridTDCell) );
-
editorForKey
- .igGridUpdating( "editorForKey", key:object );
- Return Type:
- object
- Return Type Description:
- Returns reference to igEditor or null.
Find editor for a column with key. That method can be used only after editor was already created.
- key
- Type:object
- Key of column. That can be string or number depending on structure of data in dataSource of grid.
Code Sample
var editor = $("#grid").igGridUpdating("editorForKey", "ProductName");
-
endEdit
- .igGridUpdating( "endEdit", [update:bool], [e:object] );
- Return Type:
- bool
- Return Type Description:
- Returns false if request failed and editing is continued.
End row editing.
- update
- Type:bool
- Optional
- Request to update grid with new values.
- e
- Type:object
- Optional
- Browser event. If it is defined, then events are raised.
Code Sample
$("#grid").igGridUpdating("endEdit");
-
findHiddenComboEditor
- .igGridUpdating( "findHiddenComboEditor", editor:jquery );
- Return Type:
- object
- Return Type Description:
- Returns reference to igCombo or null.
Find reference to igCombo, which is assigned to a hidden column and which is used as provider of data for visible cascading igCombo editor.
That method can be used only after visible editor was already created.- editor
- Type:jquery
- Reference to jQuery element which represents visible cascading igCombo linked to hidden igCombo.
Code Sample
var combo = $("#grid").igGridUpdating("findHiddenComboEditor", $("#hidden_combo_id"));
-
findInvalid
- .igGridUpdating( "findInvalid" );
Find column-key which editor has invalid value.
returnType="string|number" Return null or key of column which editor has invalid value and validation of column is enabled.Code Sample
var colKey = $("#grid").igGridUpdating("findInvalid");
-
isEditing
- .igGridUpdating( "isEditing" );
- Return Type:
- bool
- Return Type Description:
- Returns true if editing is on.
Check if editing is on.
Code Sample
var isEditing = $("#grid").igGridUpdating("isEditing");
-
setCellValue
- .igGridUpdating( "setCellValue", rowId:object, colKey:string, value:object, [tr:domelement] );
Sets a cell value for the specified cell. It also creates a transaction and updates the UI. Functionality depends on autoCommit option of igGrid.
If the specified cell is currently in edit mode, the function will set the desired value in the cell's editor instead.- rowId
- Type:object
- identifier of row such as value at primaryKey-column of igGrid or if it is not used, then index or row within dataSource of grid.
- colKey
- Type:string
- column key.
- value
- Type:object
- the new cell value.
- tr
- Type:domelement
- Optional
- reference to the TR-row where TD-cell is located.
Code Sample
$("#grid").igGridUpdating("setCellValue", 5, "ProductName", "bologna");
-
startAddRowEdit
- .igGridUpdating( "startAddRowEdit", [e:object] );
- Return Type:
- bool
- Return Type Description:
- Returns true in case of success or current editing is continued.
Start row editing.
- e
- Type:object
- Optional
- Browser event. If it is defined, then events are raised.
Code Sample
$("#grid").igGridUpdating("startAddRowEdit");
-
startEdit
- .igGridUpdating( "startEdit", row:number, col:number, [e:object] );
- Return Type:
- bool
- Return Type Description:
- Returns true in case of success or current editing is continued.
Start editing.
- row
- Type:number
- Index of row.
- col
- Type:number
- Index of column.
- e
- Type:object
- Optional
- Browser event. If it is defined, then events are raised.
Code Sample
$("#grid").igGridUpdating("startEdit", 5, 5);
-
updateRow
- .igGridUpdating( "updateRow", rowId:object, values:object, [tr:domelement] );
Set values for all cells in a row. It also creates a transaction and updates the UI. Functionality depends on autoCommit option of igGrid.
If the specified row is currently in edit mode, the function will set the desired values in the row's editors instead.- rowId
- Type:object
- identifier of row such as value at primaryKey-column of igGrid or if it is not used, then index or row within dataSource of grid.
- values
- Type:object
- pairs of values in the format { column1Key: value1, column2Key: value2, ... }.
- tr
- Type:domelement
- Optional
- reference to the TR element which represents row.
Code Sample
$("#grid").igGridUpdating("updateRow", 5, {ProductName: "tuna"});
-
ui-iggrid-addrow ui-widget-header
- Classes applied to the add-new-row button. Default value is 'ui-iggrid-addrow ui-widget-header'.
-
ui-iggrid-addrowactive ui-state-active
- Classes applied to the add-new-row button in active/focus state. Default value is 'ui-iggrid-addrowactive ui-state-active'.
-
ui-iggrid-addrowhover ui-state-hover
- Classes applied to the add-new-row button in mouse-over state. Default value is 'ui-iggrid-addrowhover ui-state-hover'.
-
ui-iggrid-addrowicon ui-icon ui-icon-circle-plus
- Classes applied to the icon on add-new-row button. Default value is 'ui-iggrid-addrowicon ui-icon ui-icon-circle-plus'.
-
ui-widget-overlay ui-iggrid-blockarea
- Classes applied to the filtering block area, when the advanced row edit dialog is opened and the area behind it is grayed out (that's the block area).
-
ui-iggrid-button ui-state-default ui-corner-all
- Classes applied to the buttons. Default value is 'ui-iggrid-button ui-state-default'.
-
ui-iggrid-buttonactive ui-state-active
- Classes applied to buttons in active/focus state. Default value is 'ui-iggrid-buttonactive ui-state-active'.
-
ui-iggrid-buttoncontainer ui-widget-content ui-corner-all
- Classes applied to the container of Done and Cancel editing buttons. Default value is 'ui-iggrid-buttoncontainer ui-widget-content'.
-
ui-iggrid-buttondisabled ui-state-disabled
- Classes applied to buttons in disabled state. Default value is 'ui-iggrid-buttondisabled ui-state-disabled'.
-
ui-iggrid-buttonhover ui-state-hover
- Classes applied to buttons in mouse-over state. Default value is 'ui-iggrid-buttonhover ui-state-hover'.
-
ui-iggrid-button-icon-only
- Class applied to Done and Cangel buttons when they have no text. Default value is 'ui-iggrid-button-icon-only'.
-
ui-iggrid-cancelbutton ui-corner-all
- Class applied to the Cancel button. Default value is 'ui-iggrid-cancelbutton'.
-
ui-iggrid-cancelicon ui-icon ui-icon-cancel
- Classes applied to the icon on Done button. Default value is 'ui-iggrid-cancelicon ui-icon ui-icon-cancel'.
-
ui-iggrid-deletebutton ui-state-default ui-corner-all
- Classes applied to the Delete button. Default value is 'ui-iggrid-deletebutton ui-state-default'.
-
ui-iggrid-deleteicon ui-icon ui-icon-circle-close
- Classes applied to the icon on Delete button. Default value is 'ui-iggrid-deleteicon ui-icon ui-icon-circle-close'.
-
ui-iggrid-donebutton ui-priority-primary ui-corner-all
- Classes applied to the Done button. Default value is 'ui-iggrid-donebutton ui-priority-primary'.
-
ui-iggrid-doneicon ui-icon ui-icon-check
- Classes applied to the icon on Done button. Default value is 'ui-iggrid-doneicon ui-icon ui-icon-check'.
-
ui-iggrid-editingcell
- Classes applied to the editing cells. Default value is 'ui-iggrid-editingcell'.
-
ui-iggrid-editor
- Class applied to editors. Default value is 'ui-iggrid-editor'.
-
ui-dialog ui-draggable ui-resizable ui-iggrid-dialog ui-widget ui-widget-content ui-corner-all
- Classes applied to the row edit dialog element.
-
ui-dialog-titlebar ui-iggrid-filterdialogcaption ui-widget-header ui-corner-all ui-helper-reset ui-helper-clearfix
- Class applied to editors.
-
ui-dialog-title
- Class applied to editors.
-
ui-dialog-buttonpane ui-widget-content ui-helper-clearfix ui-iggrid-filterdialogokcancelbuttoncontainer
- Classes applied to the row edit dialog OK and Cancel buttons.
-
ui-iggrid-filtertable ui-helper-reset
- Classes applied to the row edit dialog table.