Hi there.
I need to fire a custom popup when a specific cell in the grid has been edited but not saved. I was using the below event but it doesn't fire until the row is saved. Is there an event that fires immediately after a cell has been edited and tabbed off?
$("#mprGrid").live("iggridupdatingeditcellending", function(event, ui) {
alert("test");
//alert('End editing for cell at ' + ui.row + ':' + ui.column + ', update:' + ui.update + ', value:' + ui.value);
});
Also, if I may ask another question, I have the following code for editing. I would like to post a JSON string to the server when the row is saved. How can I get the edited cell/value data? ui.values["key"] is not working for me. The alert does not fire if I put in ui.values["row_id"].
$("#mprGrid").live("iggridupdatingeditrowending", function(event, ui) {
if (ui.update) {
var ok = confirm('Do you want to update row ' + ui.row);
if (!ok) {
return false;
}
alert("updating row: " + ui.values['row_id']);
//$.post(saveurl, "jsonstring", function(data) { alert("post"); });
Thank you so much.
Michelle
Thank you so much! I will be trying these suggestions soon today.
hey there,
most probably you need to set the editing mode to "cell", if you'd like the event to be fired after every edited cell loses focus (after the editing). I have tried out the following code below and it works according to your expectations:
$("#grid2").live("iggridupdatingeditcellending", function (event, ui) {
alert("editing ended");
</script>
<%= Html.Infragistics().Grid(Model).ID("grid2").Height("500px").PrimaryKey("ProductID").UpdateUrl("EditingSaveChanges").Columns(column =>
{
column.For(x => x.ProductID).HeaderText("Product ID").Width("150px");
column.For(x => x.Name).HeaderText("Name").Width("200px");
column.For(x => x.ModifiedDate).HeaderText("Modified Date").Width("200px");
column.For(x => x.ListPrice).HeaderText("List Price").Width("150px");
}).Features(features => {
features.Sorting();
features.Paging().PageSize(30);
features.Updating().EditMode(GridEditMode.Cell);
}).DataSourceUrl(Url.Action("EditingGetData")).DataBind().Render() %>
The above code is for an MVC application, but the same option names apply if you are creating the grid in JavaScript and HTML.
About your second question - in fact the grid handles and keeps track of transactions, no matter if autoCommit is true or false. The grid offers two methods for retrieving the current pending transactions, which aren't committed to the client data source yet:
var transactionsList = $("#gridElement").igGrid("pendingTransactions");
And all transactions which haven't been committed to the updateUrl (if set). The second method basically accumulates all changes, so that they are available for serialization to the server-side backend. That's very useful in batch updating scenarios.
var allTransactions = $("#gridElement").igGrid("allTransactions");
The return values of those methods are stored in a javascript array of objects, where each object, depending on the editing type - row/cell/addRow/deleteRow, is represented as follows:
You can also refer to the following links for more details about how updating and transactions work:
http://blogs.infragistics.com/blogs/angel_todorov/archive/2011/11/14/jquery-grids-unleashed-flat-grid-architecture-javascript.aspx
http://help.infragistics.com/Help/NetAdvantage/jQuery/2011.2/CLR4.0/HTML/igGrid_Updating.html
Let me know if it helps. Thank you,
Angel
I've been able to work around ui.values[key] not working by using the getCellText method:
var jobno_value = $('#mprGrid').igGrid('getCellText', ui.row, 'job_no');
Still trying to find an event or way to know when a single cell's value has changed before the row is updated. Any help is greatly appreciated!