I want to perform CRUD operations in the grid. I want to do individual updates and do not want to commit the grid on client side until the CRUD operations have taken place in the database successfully. So when deleting a row in the grid
$('body').on('iggridupdatingrowdeleted', '#grid', function () {
$('#grid').igGrid("saveChanges")
if (SuccessfulUpdate)
{
$('#grid').igGrid("commit");
}
else
// Do not commit
});
How can I check for successful DB update here?
Hello Anonymous,
Thank you for posting in our community.
By design transactions created for CRUD operations are kept locally in the browser. In order to make a POST request and send these changes to the server you will have to commit and call saveChanges method afterwards. This will invoke an AJAX request to the updateUrl option(if set) and pass the serialized transaction log as a part of the POST request. Basically, this means that currently it is not possible to update the data base without committing changes first on the client side.
In case that error is thrown what I can suggest is handling the error callback of the saveChanges method and data bind igGrid in this handler. For example:
// Save changes with success and error callbacks$(".selector").igGrid("saveChanges", function (data) { $("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);},function(jqXHR, textStatus, errorThrown) { $("#message").text("An error occurred while saving the changes. Error details: " + textStatus).fadeIn(3000).fadeOut(5000); $(".selector").igGrid("dataBind");});
// Save changes with success and error callbacks$(".selector").igGrid("saveChanges", function (data) { $("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);},function(jqXHR, textStatus, errorThrown) { $("#message").text("An error occurred while saving the changes. Error details: " + textStatus).fadeIn(3000).fadeOut(5000);
$(".selector").igGrid("dataBind");});
I hope you find my information helpful.
Please let me know if you have any additional questions regarding this matter.
I think I can do something like this too...
Call the "saveChanges" method that invokes a AJAX request to updateURL Action method. This method returns the JSON Result like this:
JsonResult result = new JsonResult();
Dictionary<string, bool> response = new Dictionary<string, bool>();
if (dbResult) response.Add("Success", true); else response.Add("Success", false);
result.Data = response; return result;
The grid changes were committed if a Success=true JSON result was returned.
Hello,
Thank you for getting back to me.
In order to send all the transactions to the server with the AJAX request they should be first committed on the client and afterwards with saveChanges method send to the server. If changes are not committed on the client they are not added to the transactions collection and respectively they can not be send to the server and saved in the underlying data base
Vasya - My solution above seem to be working (i.e. I am able to save, delete rows before it commits at the client side; the changes happen on one row at a time and the transaction row clears up after each CRUD operation) but it totally contradicts to what you are telling us above. I want to make sure I am doing this the correct way to avoid any bigger problem in later stages of development.
In general the better practice is to commit local changes before sending them to the server, however, in your particular case your code will work correctly. Please keep in mind that the presence of local changes prevent operations working on the dataView like Sorting and Paging from executing.
Please let me know if you have any additional questions or concerns regarding this matter.
Vasya - Thanks for clarifying this. The sorting behavior DID stop working. So I am trying to implement it the way you explained above. i.e.
- Commit the changes,
- and, handle the saveChanges() success and error Callback.
when handling error callback, I am trying to rebind the grid (to rollback the changes that were committed before calling "saveChanges" method), but the grid does not rebind. I am using MVC Helper in my view. In order to refresh the grid, would I have to define a datasource on client side?
I created a small sample illustrating your scenario and I am attaching it for your reference. In my sample I have an igGrid with remote data source set via dataSourceUrl property the and Updating feature enabled. I am editing a row and I am calling saveChanges method by clicking Save Changes button. I set the success in the response to false in order to hit the error callback of the saveChanges method. In this handler I am calling dataBind and on my side the grid is successfully bound to its initial data source. For example:
<script> $(function () { $("#btn").click(function () { $("#grid1").igGrid("saveChanges", function (data) { alert("Changes were saved successfully") }, function (jqXHR, textStatus, errorThrown) { alert("An error occurred while saving the changes. Error details: " + textStatus); $("#grid1").igGrid("dataBind"); }); }); }); </script>
Could you please test this sample on your side and let me know what is the result. Additionally, if this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation along with steps to reproduce.