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
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!
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
This did help and gave me the cell event I was looking for. Unfortunately, losing row update events hurts a bit more. I wish we could have both! My users really like the Done and Cancel buttons.
Thank you for the help and information!
Hi Viktor -
Just wanted to let you know this solution worked very well for me. Thank you.
I simplified it down to adding the editor event in my update columnSettings for the column like so:
{ columnKey: "emp_id", editorType: 'text', editorOptions: {
blur: function(evt) {
var empid = $(this).igEditor('text');
//do stuff and open my popup
}}
Hopefully this will help someone else as well.
Thank you again. I appreciate your's and Angel's help!
Thank you. I will try that!
Hi Michelle,
If you need to process focus/blur events for a cell editor, then you should attach those events to particular editor, but not to gridupdating. If you add event handler dynamically to editor, then that handler should be also removed, otherwise, for next editing event can be raised multiple times.It is also possible to set a flag (locally in igEditor or globally for page) when you added a handler. And if flag is set, then skip adding handler. But that can be buggy and not clean.
Below is example to process focus/blur for editor. It assumes that cell-editor for particular column is instance of igEditor (can be igCombo or igRating or custom editor).
$('#mprGrid').live('iggridupdatingeditcellstarting', function(event, ui) { var editor = ui.editor; if (!editor) { return; } editor.bind('igeditorfocus', function (evt, ui) { // do something //editor.igEditor('value', editor.igEditor('value') + 5); }); editor.bind('igeditorblur', function (evt, ui) { // do something //editor.igEditor('value', editor.igEditor('value') + 20); });});$('#mprGrid').live('iggridupdatingeditcellending', function(event, ui) { var editor = ui.editor; if (!editor) { return; } editor.unbind('igeditorfocus'); editor.unbind('igeditorblur');});
Hi,
unfortunately it is not possible to have those event fire when the whole row is in update state, because all cells have editors open for them, and when you tab, the cell only loses focus, but is still in edit state.
I will investigate a bit more for an alternative, and let you know.
Thanks for the feedback,