saveChanges callback called for every row in the grid that has been inserted/deleted/updated?

I’m using the “saveChanges” method on igGrid with a success callback specified and I see the success callback being executed for every row in the grid that I updated/deleted/inserted. Is this expected and is there a way to make it only be called once each time the user “saves changes”?

$(this).igGrid(“saveChanges”, rebindGrids);

Hello Ryan,

Thank you for contacting Infragistics Developer Support!

I was not able to reproduce the behavior that you are seeing on your side. When you call the defined method – saveChanges from the console the callback is invoked only once.

I have attached the sample project I used to test this. If this sample project is not an accurate demonstration of what you’re trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.

Please let me know if I can provide any further assistance.

Attachments:

1. igGrid-save-changes-issue.zip

Hi Denis,

What I am doing is slightly different than this. I don't have auto-commit turned on in the grid and I am using the REST settings to do the updates (http://www.igniteui.com/grid/rest-editing). It is difficult for me to give a working example because I don't have web services that can be accessed by you. Hopefully this additional bit of information will be helpful in taking this further though.

I am creating the grid from MVC in C# code, and here is what is getting rendered for the grid:

<div id="GridPlaceHolder" class="ScreenControlDataGrid sidebar-target-wrapper " data-name="MainUiScreenDetailSectionPartsGrid" data-internalid="35292">

<table data-controlId="35292" data-controlType="igGrid" data-defaultinsertbinding="[{&quot;column&quot;:&quot;ScreenId&quot;,&quot;binding&quot;:&quot;ObjectId&quot;}]" data-editable="True" data-noResultsMsg="Search produced no results." data-screenId="19991" data-showNoResultsMsg="False" data-widget="Grid" id="MainUiScreenDetailSectionPartsGrid"></table>

<script type="text/javascript">$(function () {$('#MainUiScreenDetailSectionPartsGrid').igGrid({ dataSource: '/SCALE/Detail/DetailsGridDataSourceBind?frmId=19991&tbl=Screen_Part&grdId=35292&modelClass=General.Mvc.Models.Detail.ScreenPartCrudGridModel&internalId=89',autoGenerateColumns: false,autoGenerateLayouts: false,mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, columns: [ { headerText: 'Object id', key: 'ObjectId', dataType: 'number', width: '100px', hidden: false, template: '<a href=\'/scale/details/screenpart/{{ObjectId}}\' target=\'_blank\'>{{ObjectId}}</a>' }, { headerText: 'Part name', key: 'PartName', dataType: 'string', width: '300px', hidden: false, template: null }, { headerText: 'Part type', key: 'PartType', dataType: 'string', width: '150px', hidden: false, template: null }, { headerText: 'Resource key', key: 'ResourceKey', dataType: 'string', width: '150px', hidden: false, template: null }, { headerText: 'Active', key: 'Active', dataType: 'bool', width: '75px', hidden: false, template: null }, { headerText: 'Sequence', key: 'Sequence', dataType: 'number', width: '100px', hidden: false, template: null }, { headerText: 'Default action', key: 'DefaultAction', dataType: 'string', width: '200px', hidden: false, template: null }, { headerText: 'Div css class', key: 'DivCssClass', dataType: 'string', width: '250px', hidden: false, template: null }, { headerText: 'Partial view', key: 'PartialView', dataType: 'bool', width: '75px', hidden: false, template: null }, { headerText: 'Screen id', key: 'ScreenId', dataType: 'number', width: '75px', hidden: true, template: null } ], features: [ { filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', type: 'remote', caseSensitive: false }, { name: 'GroupBy', resultResponseKey: 'GroupBy', groupByUrlKey: 'sort', groupByUrlKeyAscValue: 'asc', groupByUrlKeyDescValue: 'desc', type: 'remote', groupedColumnsChanged: function(evt,ui){_webUi.Grid.gridGroupedColumnsChanged(evt, ui)} }, { name: 'Hiding', columnHidden: function(evt,ui){_webUi.Grid.gridColumnHidden(evt, ui)}, columnShown: function(evt,ui){_webUi.Grid.gridColumnShown(evt, ui)} }, { name: 'ColumnMoving', mode: 'deferred', moveType: 'dom', columnMoved: function(evt,ui){_webUi.Grid.gridColumnMoved(evt, ui)} }, { name: 'Resizing', allowDoubleClickToResize: true, columnResized: function(evt,ui){_webUi.Grid.gridColumnSizeChanged(evt, ui)} }, { name: 'Selection', mode: 'row' }, { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', type: 'remote', mode: 'multiple', columnSorted: function(evt,ui){_webUi.Grid.gridColumnSorted(evt, ui)}, modalDialogClosed: function(evt,ui){_webUi.Grid.gridmodalDialogClosed(evt, ui)} }, { summaryExprUrlKey: 'Summaries', summariesResponseKey: 'Metadata.Summaries', name: 'Summaries', type: 'local' }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', pageSize: 50, type: 'remote', defaultDropDownWidth: '80px' }, { columnSettings: [ { columnIndex: -1, columnKey: 'ObjectId', readOnly: true }, { columnIndex: -1, columnKey: 'ScreenId', readOnly: true }, { columnIndex: -1, columnKey: 'PartName', required: true, validation: true, editorType: 'text', editorOptions: { button: 'clear', maxLength: 0 } }, { columnIndex: -1, columnKey: 'PartType', required: true, validation: true, editorType: 'combo', editorOptions: { allowCustomValue: false, caseSensitive: false, enableClearButton: true, filteringType: 'local', renderMatchItems: 'multi', textKey: 'DisplayText', valueKey: 'Identifier', dataSource: [{"Identifier":"10","Description":"Div Container","DisplayText":"Div Container","IsDescUsedForDisplay":true},{"Identifier":"20","Description":"ModalDialog","DisplayText":"ModalDialog","IsDescUsedForDisplay":true}] } }, { columnIndex: -1, columnKey: 'ResourceKey', required: false, validation: true, editorType: 'text', editorOptions: { button: 'clear', maxLength: 0 } }, { columnIndex: -1, columnKey: 'Active', required: false, validation: true }, { columnIndex: -1, columnKey: 'Sequence', required: true, validation: true, editorType: 'numeric', editorOptions: { button: 'clear', dataMode: 'int', maxDecimals: 0, maxValue: 99999, minDecimals: 0, minValue: -99999, regional: 'en-US' } }, { columnIndex: -1, columnKey: 'DefaultAction', required: false, validation: true, editorType: 'text', editorOptions: { button: 'clear', maxLength: 50 } }, { columnIndex: -1, columnKey: 'DivCssClass', required: false, validation: true, editorType: 'text', editorOptions: { button: 'clear', maxLength: 0 } }, { columnIndex: -1, columnKey: 'PartialView', required: false, validation: true } ], name: 'Updating', enableAddRow: true, editMode: 'row', enableDeleteRow: true, rowAdding: function(evt,ui){_webUi.detailsScreenBinding.fillGridRequiredColumnsOnAddRow(evt, ui)} } ], alternateRowStyles: true, height: '100%', width: '100%', autoFormat: 'dateandnumber', rest: true, restSettings: { update: { url: '/general/scaleapi/screenPartApi/save' }, create: { url: '/general/scaleapi/screenPartApi/save' }, remove: { url: '/general/scaleapi/screenPartApi/delete' } }, primaryKey: 'ObjectId', fixedHeaders: true, renderCheckboxes: true, localSchemaTransform: false, rendering: function(evt,ui){_webUi.Grid.gridrendering(evt, ui)}, dataBound: function(evt,ui){_webUi.Grid.gridDataBound(evt, ui)}, rowsRendered: function(evt,ui){_webUi.Grid.gridRowsRendered(evt, ui)}, dataDirty: function(evt,ui){_webUi.Grid.gridUpdatingDataDirty(evt, ui)} });});</script>

<script type="text/javascript">$(function () {

if　(typeof　_webUi.Grid.enableCommitActionForEditableGrid　===　'function')　{　 $(document).delegate('#MainUiScreenDetailSectionPartsGrid', 'iggridupdatingrowdeleted',{'CommitSelector' : 'li.menubuttonsave'} ,_webUi.Grid.enableCommitActionForEditableGrid)} })</script><script type="text/javascript">$(function () {

if　(typeof　_webUi.Grid.enableCommitActionForEditableGrid　===　'function')　{　 $(document).delegate('#MainUiScreenDetailSectionPartsGrid', 'iggridupdatingrowadded',{'CommitSelector' : 'li.menubuttonsave'} ,_webUi.Grid.enableCommitActionForEditableGrid)} })</script><script type="text/javascript">$(function () {

if　(typeof　_webUi.Grid.enableCommitActionForEditableGrid　===　'function')　{　 $(document).delegate('#MainUiScreenDetailSectionPartsGrid', 'iggridupdatingeditrowended',{'CommitSelector' : 'li.menubuttonsave'} ,_webUi.Grid.enableCommitActionForEditableGrid)} })</script>

<script type="text/javascript">$(function () {

$('#MainUiScreenDetailSectionPartsGrid').attr({

'data-modelClass': "General.Mvc.Models.Detail.ScreenPartCrudGridModel",

'data-dbtable': "Screen_Part",

'data-headerkey': "Screen_Id"

});})</script>

</div>

Hello Ryan,

Thank you for your patience!

I was able to reproduce the scenario. By default batch for rest settings is set to false. Because of this there is a postback for each change. If you enable batch, you can avoid this. However because of the rest specification you will still have a separate postback for each method (POST, PUT and DELETE), i.e. if you have added 5 rows and edited 3 you will have 2 postbacks one for the deleted rows and another one for the edited.

You can review the attached sample.

Do not hesitate to contact me if you have additional questions.

Attachments:

1. RestUpdatingSample.zip