When I add a new row it is added to the end of the grid just below the last row, that is not nice because user has to scroll down to see the new row, this is awfull specially if we need to add a new child row. How to show the new added rows on top of the list? Or at least, how to set focus on the last row so user doesn't have to scroll down?
Hello Luis,
Thank you for posting in our community.
What I can suggest for scrolling to the newly added row is handling rowAdded event of igGrid. In this event you could get reference to the scroll container and scroll to the last row. For example:
$("#grid").igGrid({ dataSource: data, primaryKey: "ID", height: "200px", autoCommit: true, features: [{ name: "Updating", rowAdded: function (evt, ui) { $("#grid_scroll").scrollTop($("#grid").find("tr:last").first().position().top); } }] });
$("#grid").igGrid({
dataSource: data,
primaryKey: "ID",
height: "200px",
autoCommit: true,
features: [{
name: "Updating",
rowAdded: function (evt, ui) {
$("#grid_scroll").scrollTop($("#grid").find("tr:last").first().position().top);
}
}]
});
This will scroll to the last row, which in this case is going to be the newly added row.
$("#grid_scroll") will get a reference to the igGrd`s scroll container which the grid uses in order to show scrollbars and render complex layouts.
I made a small sample and I am attaching it for your reference.
I hope you find this information helpful.
Please let me know if you need any further assistance with this matter.
Thank you Vasya. Your sample works fine. Based on yours I did this:
$(document).delegate("#MyGrid", "iggridupdatingrowadded", function (evt, ui) {
$("#grid_scroll").scrollTop($("#MyGrid").find("tr:last").first().position().top);
It should work, right? It doesn't :( Any advice? Thanks
$("#MyGrid_scroll").scrollTop($("#MyGrid").find("tr:last").first().position().top);
Thanks again. I fixed it, now it works, but only with the first row I add, after first row it doesn't move focus to the new added row. By the way, my original question was: How to show the new added rows on top of the list? This behavior can helps users in some scenarios, for example (an ideal scenario), when I am using EditMode(GridEditMode.Row), users click on the template, enter new data, press ENTER (or TAB), row is added, user see the new added row in the list, and still can click on the template to add a new row, all without scrolling (manually or programatically). Is there an easy way to do that? If not, could you bring a solution? I am not good at JavaScript or JQuery (yet). Thanks for your help ;)
Hello Luis Ledesma,
You can have the newly added row appear at the top of the grid by manually handling the row adding behavior. You can do this by handling the igGridUpdating's rowAdding event, calling your igDataSource's insertRow() method to insert the row at index 0, then rebind the grid to display the new data and then cancelling the event so the grid does not add a duplicate row.
You can see an example of how to achieve this in a jsFiddle I have created here:
http://jsfiddle.net/ig_mharrington/fuovszm0/
If you have any further questions with this, please let me know.
Hi Michael,
Whether it's possible to add the new row at the top of the grid without loosing the transaction log after the databind.