My users want to it so that when they're done editing a row in the grid, a new row is immediately added to the grid as though they clicked on the add row link. I have that part working but the display behavior of the grid is odd. Instead of the edit row appearing at the top of the grid, it appears immediately below the row they were editing, making it look like they're editing a different row now instead of actually creating a new one.
Is there something I need to do in order to correct this so that it displays properly?
I have the following jQuery code in place to handle starting the edit of a new row:
$("#MyGrid").on("iggridupdatingeditrowended", function (evt, ui) {
if (ui.update)
$("#MyGrid").igGridUpdating("startAddRowEdit");
});
Here is a screenshot of what I'm seeing for reference:
https://www.dropbox.com/s/1y748jhn71rlrw2/startAddRowEdit%20Issue.png?dl=0
Hi Keith,
Thank you for your feedback and I'm glad you were able to resolve your issue.
If I can provide you with further assistance, please let me know.
Regards,
Tsanna
Hi Tsanna,
That worked beautifully, thank you.
As for the use case - we're using the grid to record a series of measurements for a large physical object that can be any size (think large cargo). Each line in the grid is a single measurement (at a height of 2 feet, the object is 7.3 feet wide, at a height of 2.3 feet, the object is 7.6 feet wide, and so on). Because they need to enter so many points of data, the don't want to have to take their hands off of the keyboard to grab the mouse, click the Add Row item, then back to the keyboard to enter the next measurement. Since they usually have to enter 20-50 measurements, that's a lot of back-and-forth. Instead, they'd rather type in the measurement, hit enter to save the row, and then automatically start editing a new row which speeds things up for them considerably as it completely removes the need to go back to the mouse.
Please note that there is not a "proper" way of doing this, since it's not a frequent scenario and I'm still wondering what is the use case behind it. However the workaround that Daniel suggested can be modified, so that the grid doesn't introduce a little visual quirk. For instance:
editRowEnding: function (evt, ui) { if (ui.update) { setTimeout(function () { ui.owner.endEdit(true); ui.owner.startAddRowEdit(); }, 60); ui.keepEditing = true; } }
Please let me know if it works for you.
Regards,Tsanna
Daniel's function trick solved the issue. It introduces a little visual quirk where the edit row appears where it originally did and then immediately jumps to where it should be, but it at least produces the desired result. Still, I'd love to know if you would be able to provide a "proper" way of doing this as well.
I'm using version 2014.2. We first noticed this issue about 2 or 3 weeks ago when a user pointed it out.
Hello Keith,
I was able to replicate the issue only using Enter key on the currently edited row. When did you observe it? Also before I continue assisting you, could you tell me the exact version of Ignite UI that you're currently using? Waiting for your response.