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