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
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.
I am running into a similar issue. I want to add my rows at the top of the grid. I tried to use your sample code and it is working but the only problem is "rowAdding" event is getting called only when I click on other rows. So I have a button I am clicking on that to add rows. If I click multiple times I want to add multiple blank rows at the top of the grid.
Right now if I click on add a new line, my first row is at the top of the grid, if I click again to add a new line I have one row at the top and the recent added row at the bottom. The problem is "rowAdding" or "rowAdded" are not getting called.
Here is my function to add new lines. Notice that I am not showing "Add New Row" button as well as "Done/Cancel" button. Is there any way I can call rowAdding each time when I call this function ?
var addingSecurity = function() { var securityOnlyModel = jQuery("#securityOnlyModel");
securityOnlyModel.igGridUpdating("endEdit", true); securityOnlyModel.igGridUpdating("option", "enableAddRow", true); securityOnlyModel.igGridUpdating("startAddRowEdit", true); };
Please let me know if you need any further information.
Thanks,
Mohan
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.
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 ;)
$("#MyGrid_scroll").scrollTop($("#MyGrid").find("tr:last").first().position().top);