I've successfully used the igGrid to hook into our Web API. Create, Remove and Delete operations are firing nicely and playing nicely together. The only scenario that is currently failing is this:
In the "iggridupdatingrowadded" event I call "SaveChanges" to the grid to force the API call.
rowAdded: function (e, ui) { var original = ui; ui.owner.grid.saveChanges(function (record, status, response) { var row = this.findRecordByKey(original.rowID); row[original.owner.grid.options.primaryKey] = record[original.owner.grid.options.primaryKey]; this.updateRow(original.rowID, row); }); }
When the transaction commits, it is failing to map the transaction with an -1 ID when it should be 100.
Technical Details:
v14.2
Method: _commitTransaction
this.origDs has a record value of -1.
Unhandled exception at line 244, column 17855 in http://localhost:51580/admin/Scripts/IG/js/infragistics.core.js
0x800a138f - JavaScript runtime error: Unable to set property 'Id' of undefined or null reference
How can I correctly programmatically change the primary key value so the entire grid will function as normal?
Thanks,
Hello Karthik,
Thank you for getting back to me.
By design igGrid is a client side control. This means that it has no information for the changes in the data base on the server side. If your requirement is to sync them you will have to ensure that the data source available on the client side is the same as the one on the server side, which could be achieved using my suggestion to send the updated data and dataBind grid in the success callback. This data, that is sent in the response should consist of all the rows of the table in the underlying data source not just the recent;y updated one.
In case that your are using a remote data source when dataBind is called a get request to the dataSourceUrl is going to be triggered which will get the new data source unless it is cached.
By design new records in igGrid display at the bottom of the grid and currently we do not have an option to insert row on any specified position.
Your assumption is correct, when called the dataBind method will make a request to the dataSourceUrl and if your data is not cached, however retrieved directly from he data source it should return the updated records.
Additionally, unbound column could not be used as a primary key since the primary key should point to an actually existing field in the underlying data source.
Please let me know if you have any additional questions
I don't like the implementation doing it this way. New records typically display on top of the list - just doing another data bind causes new records to fall into their default location.
The underlying issue that needs to be solved is the transaction id for the internal datasource doesn't match the updated value. What can I do to synchronize those values so it will match?
What if I don't use the primary key as the primary key column and setup an unbound column to act as an identity? That way I can update the column at my leisure. Will that work?
The data from the saveChanges event is that of a single record. Not the entire datasource. So if I use the code you provided then the grid will go from 100 records, to one record.
Would just calling dataBind cause the grid to reach out to the original url from before and just grab all of the current records?
Hello,
Thank you for posting in our community.
What I can suggest in order to have a matching ids on the client and server is to bind igGrid to the new(updated) data on every success callback of the saveChanges function. This could be achieved by updating the igGrid data source instance with the values from the underlying data base. The new data could be sent in the response and afterwards used to data bind igGrid. For example:
//add the updated data with the new id`s matching actual records in the response and send it back to the success callback $(".selector").igGrid("saveChanges", function (data) { //Set $(".selector").igGrid("option", "dataSource", data); $(".selector").igGrid("dataBind"); }
//add the updated data with the new id`s matching actual records in the response and send it back to the success callback
$(
".selector"
).igGrid(
"saveChanges"
,
function
(data) {
//Set
"option"
"dataSource"
, data);
}
I hope you find this suggestion helpful.
Please let me know if you have any additional questions regarding this matter.