Hello,
I'm trying to create a view in MVC using the iggrid 2014.1.2249.The screen has a grid "preview" of the left side and a detail section on the right side. It should have the following behaviour:
I'm currently stuck on that last part. This is what I have so far.
When clicking on the "save" button of the new screen, I create a form post and my action returns the newly created record (JSON). I add it the datasource but then I don't manage to select the row.
var formData: string = form.serialize();$.ajax({ type: "POST", url: form.attr("action"), data: formData, success: data => { //the new record var notification: any = data.notification; //primary key of the new record var notificationId: any = data.notification.ID; //add row $('#PreviewGrid').data("igGrid").dataSource.addRow(notification, true); //rebind datasource $('#PreviewGrid').data("igGrid").dataBind();
//TODO: select new row}
I have found that I can select a row using the following:$("#PreviewGrid").igGridSelection("selectRow", rowindex);
However, I don't know the row index of the newly created row. I have read that I can find that index number in the following:$("#PreviewGrid").igGrid("rows")
However, this only contains the rows that are currently visible on the screen (remember: i'm using paging).
So my question is, using paging, how do I find the newly added row, and select it, making it visible on the screen, using the primary key of the added object.
Kind regards,
Michael
Hello Michael,
Thank you for using Infragistics forums!
There are two ways you can achieve what you are trying to do. If you use the addRow method of igDataSource, you will need to manually set the correct page index that will contain the new row. Additionally paging will be prohibited unless the newly added row is committed. A full solution will look similar to the following:
var grid = $('#PreviewGrid'), ds = grid.data("igGrid").dataSource; ds.addRow(notificationId, notification, true); var lastPageIndex = Math.floor(ds.data().length / ds.settings.paging.pageSize); grid.igGridPaging("pageIndex", lastPageIndex);
No additional dataBind() is needed as igGridPaging will render the modified data.
Alternatively you could use igGridUpdating's addRow method which does the paging automatically. The above will then be shrunk to the following line:
grid.igGridUpdating("addRow", notification);
However, this will only let you go to the last page if you set autoCommit: true for the grid as Updating's API adhere to the option and does not provide additional parameters to specify if the transaction should be automatically committed.
When you are on the last page scrolling the grid down and selecting the new row is pretty straightforward:
var gridScroll = $("#PreviewGrid_scroll"); gridScroll.scrollTop(gridScroll.height()); grid.igGridSelection("selectRow", grid.igGrid("rows").length - 1);
I hope this helps! Please, let me know if you have any other questions and/or concerns!
Best regards,
Stamen Stoychev
Very nice Stamen. Thanks a lot it works!
I've used the gridUpdating feature and then selecting the row as you suggested.I've had to enable GridUpdating feature obviously and set the EnableDeleteRow = false, EnableAddRow = false and EditMode = GridEditMode.None. This to avoid the user using the grid's addrow or delete row feature as I prefer to use my own buttons for that.
Thanks again.
I am glad I was able to assist you. Please, don't hesitate to contact me if you have any other questions!